Is there a way to decrease the font size of certain text when the site goes responsive on a mobile device? I would like to be able to make some of my desktop headings quite a bit larger but they get cut off when viewed on a phone since the font size remains the same. How can I specify what the font size will be when viewed on a mobile device?
Hi!
If you do not want header to resize when scrolled, this is fine. You can edit el_height value if you would like to change the height of header and keep the resizing feature active.
Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust the color and transition time as needed
.header-scrolled #header_main { background-color: red; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
Best regards,
Yigit
Hey JadynWelch01!
Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
.caption_framed .slideshow_caption .avia-caption-title {
background: rgba(0, 0, 0, 1); } /* rgb value of the color opacity level = 1 */
div .slideshow_caption h2 { font-size: 40px; }
Regards,
Yigit
Hey!
You can upload your own svg files to create your own icons on fontello.
Cheers!
Ismael
I am trying to figure out how to extend the transparency overlay across 100% of the image in my fullscreen slider. I’d also like to increase the font size of the caption text “SHADE FROM THE OUTSIDE IN”. Any assistance would be much appreciated!
Website url is http://deluxeawning.net/ and it’s the first feature on the page that I’m referring to. Thanks!
Jadyn
Thank you.
This is helpful.
But what I would like to know is if we can create our own custom icons using Photoshop, and then upload them into Fontello.
If yes, what type of file extension would our custom icons have to be ?
-
This reply was modified 12 years ago by
turner2f.
Hi jrgrigg!
Can you please give us a link to the website with the button? You can use em instead of px. Try this:
.avia-button-wrap .avia_iconbox_title {
font-size: 20px;
line-height: 1.5em;
}
Best regards,
Ismael
Hey!
They look the same. Anyway, there is a problem with the html rendering. It looks like this:
<p style="text-align: left;"><span class="av_font_icon avia_animate_when_visible av-icon-style- B1 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#7bb0e7; border-color:#7bb0e7;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span>Precisão</p>
<p><abbr rel="tooltip" title="Define a margem de exatidão no diagnóstico médico. Deve estar acima de 95%.">[?]</abbr><span class="av_font_icon avia_animate_when_visible av-icon-style- B2 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#dadada; border-color:#dadada;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span> Incerteza <abbr rel="tooltip" title="Define a margem de imprecisão no diagnóstico médico. O limite máximo é de 5%.">[?]</abbr>
</p>
The Text Block is generating another paragraph tag which I suspect is cause by space on the Text Editor. Please check. You can replace it with this:
<p style="text-align: left;"><span class="av_font_icon avia_animate_when_visible av-icon-style- B1 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#7bb0e7; border-color:#7bb0e7;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span>Precisão<abbr rel="tooltip" title="Define a margem de exatidão no diagnóstico médico. Deve estar acima de 95%.">[?]</abbr><span class="av_font_icon avia_animate_when_visible av-icon-style- B2 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#dadada; border-color:#dadada;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span> Incerteza <abbr rel="tooltip" title="Define a margem de imprecisão no diagnóstico médico. O limite máximo é de 5%.">[?]</abbr>
</p>
Cheers!
Ismael
Hi 4youth!
1- Please try to increase the allocated memory to 128M http://www.wpbeginner.com/wp-tutorials/fix-wordpress-memory-exhausted-error-increase-php-memory/
You can also contact your service providers to do it
2- I have just checked your website on my iPhone and responsiveness seems fine http://i.imgur.com/DYe0M49.png
Special heading text on the bottom is a bit too big, you can decrease the font size by adding following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 480px) {
body .av-special-heading.blockquote > * { font-size: 35px; }}
3- Please see Peter’s post here https://kriesi.at/support/topic/add-a-new-custom-font/#post-212124
4- No, we do not. You can try hiring a freelance developer on Microlancer, Codeable or WorkPress
Best regards,
Yigit
Hey David!
Please add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 480px) {
h1 { font-size: 38px!important; }}
Cheers!
Yigit
Hey Guilherme!
Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
#top .main_menu .menu li ul a { font-size: 16px; }
Best regards,
Yigit
How do I change the submenu font size?
Yes, that would be font-size:
.recentcomments a, .widget_recent_entries li a {
font-size: 22px;
}
Regards,
Josue
Hey guys –
I just noticed something strange. On mobile, the heading fonts are not wrapping as they should to fit within the new browser size. They are instead running off the edge of the screen. See http://thesparcnetwork.net
Is there any resolution to this?
Regards,
David
Side question: What’s the optimal size for the advanced layerslider?
As you will see when you login, my two photos are blurry, but I have high-res photos that I can resize to fit. I just don’t know what size they should be.
Thanks!
Hi,
Now I need help changing the line height of the buttons to show correctly on the tablet. I used this code on quick CSS:
.avia-button-wrap .avia_iconbox_title {
font-size: 20px;
line-height: 30px;
}
It shows up correctly on a desktop, but there’s no change in line-height on a tablet.
Thanks,
Jonny
OK, I can get the CALL US to work OK now with the following CSS:
#advanced_menu_toggle {line-height:14px;}
#advanced_menu_toggle:after { content: ‘CALL US’; font-size: 14px;}
#advanced_menu_toggle:before { display: none; }
But I would still prefer a phone icon please, if you can help?
Thanks,
Matt
-
This reply was modified 12 years ago by
MM.
MMParticipant
Hi guys,
I’m trying to change the slide out menu icon to a telephone icon (or even the words ‘CALL US’).
I added the following to my Quick CSS:
#advanced_menu_toggle:after { content: ‘📱’; font-size: 12px; }
#advanced_menu_toggle:before { display: none; }
Which just displayed ‘📱’ and not the associated entypo icon. So I tried:
#advanced_menu_toggle:after { content: ‘CALL US’; font-size: 12px; }
#advanced_menu_toggle:before { display: none; }
The ‘CALL US’ doesn’t fit in the button (the word ‘CALL’ does but the ‘US’ appears about 50px below the button).
Unfortunately, I’m not sure what to put in for the content to get the mobile phone icon (incidentally, the phone icons don’t seem to display in Chrome or Safari, along with lots of others: http://www.entypo.com/characters/ , so not sure it will work anyway?).
Any ideas please?
Thanks,
Matt
You are welcome, glad we could help :)
Regards,
Josue
Man you guys are good! Thanks!
Found another error:
.header_bg {
background: rgba(255,255,255,0.9) !important;
It’s unclosed, replace it by:
.header_bg {
background: rgba(255,255,255,0.9) !important;
}
Cheers!
Josue
Hmm I took that line out and its still not working…
The doesn’t work because you have a typo in your Quick CSS:
http://malmstromwhite.com/wp-content/uploads/dynamic_avia/enfold.css?ver=1
At the bottom there is a font-family property that doesn’t belong to any selector, all the code below it won’t work until this line is removed.
font-family: ‘Open Sans Condensed’, sans-serif;
Best regards,
Josue
This reply has been marked as private.
Hey!
That code worked on my end, can you post a link to your website?
Cheers!
Josue
When using firebug, I can change the font-size to 15, and the font-weight to 400 instead of 12, and 600, but when I put this in the custom CSS it doesn’t work…
What do I need to put in custom CSS to make those changes?
Thanks!
.main_menu ul:first-child > li > a {
display: block;
font-size: 15px!important;
font-weight: 400!important;
padding: 0 13px;
text-decoration: none;
}
Thanks. That seems to cut off (overlay) the banners at the top approx . Could there be a conflict with other customizations? I have custom css as follows:
.main_color {
border-color: #f2f6df;
}
.avia-menu-fx { display: none; }
.current-menu-item.current_page_item a {
background: #f2f6df;
border: 1px solid #f2f6df;
border-radius: 6px;
}
.main_menu ul:first-child > li a {
height: 40px !important;
line-height: 40px !important;
}
.main_menu {
position: absolute;
top: 30%;
}
.content {
padding-top: 20px;
padding-bottom: 0px;
}
body .column-top-margin {
margin-top: 10px;
}
h4 {
font-size: 18px;
line-height: 1.5em;
margin-bottom: 4px;
}
.header_color .container_wrap_meta {
background: #662d89;
}
.header_color {
color: #ffffff;
}
.header_color .phone-info a, .header_color .av-sort-by-term a, .header_color .phone-info {
color: #ffffff;
}
Hi
I’m experimenting with a new site here: http://bit.ly/1cIuFJm
As you can see, I’ve tried to center the main navigation but this has led to a white bar showing on the right hand side where the nav bar has shifted along. How can i remove this?
My current custom css is below:
.title_container .breadcrumb { display: none; }
h1 { color: #000000 !important; }
h2 { color: #000000 !important; }
h3 { color: #000000 !important; }
#footer .widgettitle { color: #ffffff !important; }
.title_container {
display: none;
}
@media only screen and (min-width: 767px) { .social_header .phone-info span { font-size: 20px; } }
.main_menu a {
color: #d6b307 !important;
}
.main_color .avia-icon-list .iconlist_icon { background-color: #d4b208; }
.logo {
width: 100% !important;
}
.logo a {
width: 300px!important;
margin: 0 auto!important;
}
.main_menu { left: 19%; }
#header .container {
padding: 5px ;
}
.main_menu .menu a {
border-left: 0px !important;
border-right: 0px !important;
font-size: 19px!important;
}
h1, h2, h3 {
text-transform: none !important;
}
Thanks,
Rob