Solved – https://kriesi.at/support/topic/font-size-in-newest-enfold-theme/

Hey ML!

Em is relative to the font size currently set to the parent element, in most cases it would be to this body rule set in css/base.css:

body {
	font: 13px/1.65em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #444;
	-webkit-text-size-adjust: 100%;
 }

If you want to have different font sizes depending on screen size you’d need to use some media queries:

@media only screen and (max-width: 480px) {
body{ font-size: 18px; }
}
@media only screen and (max-width: 767px) {
body{ font-size: 16px; }
}
@media only screen and (max-width: 989px) {
body{ font-size: 14px; }
}

Regards,
Josue

Yes, you can have them combined by the way:

ul, p {
  font-size: 0.8em;
  line-height: 1.8em;
}

Cheers!
Josue

Hi,

Try with this:

@media only screen and (max-width: 479px) {
    .responsive #socket .sub_menu_socket { 
        display: block !important; 
    }
    #socket .container { 
        text-align: center; 
    }
    #socket .container span, #socket .container nav {
        float: none !important;
        display: inline-block !important;
    }
    #socket .sub_menu_socket li {
        float: none;
        text-align: center;
        width: 100%;
        margin: 15px 0;
        border: 0;
    }
    #socket{
        font-size: 14px;
    }
}

Adjust as needed.

Regards,
Josue

Try with this code in Quick CSS:

p {
  font-size: 0.8em;
  line-height: 1.8em;
}

Regards,
Josue

Hey!

You can use this CSS for the toggle titles.

.toggler { font-size: 20px; color: red !important; }

Regards,
Elliott

Hey!

Open up /enfold/config-templatebuilder/avia-shortcodes/masonry-entries.php and change line 640 from this.

$output .= 		"<a class='av-masonry-pagination av-masonry-load-more' href='#load-more' {$data_string}>".__('Load more','avia_framework')."</a>";

To this.

$output .= do_shortcode("[av_button label='Load More' link='manually,#load-more' link_target='' size='medium' position='center' icon_select='no' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class='av-masonry-load-more']");

Cheers!
Elliott

Hi!

Try adding this.

@media only screen and (max-width: 479px) {
.av-catalogue-content { font-size: 10px !important; }
}

Cheers!
Elliott

• This reply was modified 11 years, 3 months ago by Elliott.

Hi addwebtoday!

Try adding this to your custom CSS.

@media only screen and (max-width: 479px) {
h1.av-special-heading-tag { font-size: 16px !important; }
h2.av-special-heading-tag { font-size: 15px !important; }
h3.av-special-heading-tag { font-size: 14px !important; }
}

That will reduce their size on smaller screens.

Cheers!
Elliott

Hey bosbach!

If this is for SEO purposes then you’ll need to open up /enfold/includes/admin/register-widget-area.php and change all of the H3 to H4. There are quite a few of them.

echo "<h3 class='widgettitle'>" . $title . "</h3>";

If your just trying to change their size then you can use CSS.

#footer .widgettitle { font-size: 14px !important; }

Regards,
Elliott

Hey Marcelo!

Change your layout from 1/3 to 1/2 columns to make more space for the titles and/or reduce its font size:

strong.news-headline {
    font-size: 11px;
    line-height: 13px;
}

Cheers!
Josue

Hey!

Try with this in General Styling > Quick-CSS:

h1{
font-size: 24px !important;
}
h2{
font-size: 18px !important;
}

Cheers! 
Josue