This is my settings on QuickCSS
@media only screen and (max-width: 479px) {
.responsive #top h1 { font-size: 22px;}
.responsive #top h2 { font-size: 22px;}
.responsive #top h3 { font-size: 22px;}
}
What i musst set on Typography?
Hi,
Did you try setting a font size for all screen sizes for the H2 element under Enfold->General Styling->Typography?
Best regards,
Rikard
Hi vew01,
I have formatted your Quick CSS so it’s easier to read:
.phone-info {
font-size: 18px;
}
@media only screen and (max-width: 1200px) {
.fallback_menu.av-main-nav-wrap {
position: relative; right: -120px;
}
}
@media only screen and (max-width: 790px) {
.responsive #top #wrap_all .container {
width: 70%;
max-width: 70%;
}
}
As for code’s to remove, I think you should remove:
@media only screen and (max-width: 1200px) {
.fallback_menu.av-main-nav-wrap {
position: relative; right: -120px;
}
}
Because it does not seem to do anything.
And remove this because it only makes the area for the content on mobile narrow:
@media only screen and (max-width: 790px) {
.responsive #top #wrap_all .container {
width: 70%;
max-width: 70%;
}
}
Best regards,
Nikko
Hi alexs91,
I have modified the font size of the content of the homepage slider, please review your website.
Best regards,
Nikko
Hey Klaus-Peter,
You can change the general font sizes under Enfold->General Styling->Typography. If you need more specific settings then you can check under Enfold->Advanced Styling.
Best regards,
Rikard
Dear Support-Team,
I have probs in changing the font size in
• Menue
• Text
• Headings H1, H2, H3, H4
I would like to increase menue and normal text to 14px and Headings to different values: H1-20px, H2-18px, H3-16px, all maybe standard or bold format
I checked out some items from the forum and also clears cache, but only in the footer it works.
Can you help me?
Thx
Klaus-Peter
-
This topic was modified 2 years, 7 months ago by
inliner68.
Hi Ismael,
thanks for your tip! In fact, I skipped the Typography panel before because of the intro with “BETA” in it…
It works! However, it took a while before I noticed the modifications on all screen types. I think it was only showing after I deleted the font size in Erweitertes Styling > p. I still don’t understand why an entry here would only work for screens >736px. This wasn’t before, or was it?
Best regards,
Cornelie
Hey woogie07,
Thank you for the inquiry.
You can add this css code to adjust the style of the accordion element.
.av-elegant-toggle .toggle_icon {
left: 20px;
right: auto;
}
.js_active .av-elegant-toggle .toggler, .avia-admin-preview-container .av-elegant-toggle .toggler {
padding: 35px 35px 30px 55px;
font-size: 17px;
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.
Best regards,
Ismael
Hey CJGVD,
Thank you for the inquiry.
You can now customize the font size for various screen sizes in the Enfold > General Styling > Typography panel. If you enable the Default Content Font Size toggle for example, you will have access to different dropdown menus for adjusting the font size on desktop, medium, small, and very small screen sizes. Let us know if this help.
Best regards,
Ismael
I am unable to effect any change in paragraph font sizes on the website’s homepage. It is far too small for mobile devices unless device is turned to landscape view.
I’ve tried adding Quick CSS on Enfold, Theme Options, General Styling, Quick CSS with part or all of the below.
(I am level zero as a web developer.)
Nothing changes, no matter what I do.
All I’d like is for the font size of paragraphs to be larger on the mobile version.
I’ve tried both of these to no avail.
@media only screen and (max-width: 790px) {
.responsive #top #wrap_all .container { width: 70%; max-width: 70%; }}
@media only screen and (max-width: 1200px) {
.fallback_menu.av-main-nav-wrap { position: relative; right: -120px; }}
.phone-info {
font-size: 18px;
}
Thanks for any help you can offer.
Hi,
Thanks for the update. You can set the default font size under Enfold->General Styling->Typography. If you need more advanced settings than the ones available there, then you can go to Enfold->Advanced Styling.
Best regards,
Rikard
Dear Kriesi-Team,
I used to set the default fontsize of p in Allgemeines Styling > Schriften. Now this option is not available anymore, so I have set the fontsize of p in Erweitertes Styling > p.
However, the fontsize only seems to apply on bigger screens. The info via DevTools seems to be inline with this assumption:
@media only screen and (min-width: 736px)
#top .main_color p, #top .alternate_color p {
font-size: 17px;
}
Why is this? Since there is no possibility to set a certain fontsize in Erweitertes Styling per screen type, I am confused why it only seems to apply on screens >736px. I would like this setting to apply to all screens.
Thanks a lot for your help.
Best regards,
Cornelie
This reply has been marked as private.
Hi,
Thank you for the update.
The css files are currently compressed which is probably why the modifications are not taking effect. Please toggle or temporarily disable the Enfold > Performance > File Compression settings. By disabling the file compression settings, you will be able to make the necessary adjustments and updates without any conflicts. Once you have made the required modifications, you can re-enable the file compression settings to optimize the performance of your website.
If the css code above is still not working after disabling the file compression, please replace it with this css code before re-enabling the file compression.
#top .title_container .main-title {
font-size: 30px;
}
Best regards,
Ismael
Hi,
Thank you for the update.
Do you know why the new theme has caused the top bar and the text size to display differently?
This issue is likely caused by modifications made in the header.php file. It is possible that the previous developer edited the template, and those changes were lost when you replaced it with the current version.
To adjust the text size, please modify the settings in Enfold > General Styling > Fonts or make changes to the element styles in the Advanced Styling panel.
Best regards,
Ismael
hmmm, does not seem to do anything rikard…
ive put font-size 130 px in it and the result is the same…
Hey jeel147,
Please try the following in Quick CSS under Enfold->General Styling:
h1.main-title {
font-size: 30px;
}
Best regards,
Rikard
Hi tulin88,
Are you using a child theme? if yes, please add this PHP Snippet in your child theme’s functions.php, if you don’t have one, then you can use a plugin called WPCode – Insert Headers and Footers and insert it as a PHP Snippet:
add_action( 'ava_inside_main_menu', 'heading_above_news' );
function heading_above_news() {
$page_id = 1828;
$header = "TECHNICAL ASSISTANCE FOR TOWN TWINNING BETWEEN TÜRKİYE AND THE EU PHASE – II";
if ( is_page( $page_id ) ) {
echo '<div class="news-header"><h3> ' . $header . '</h3></div>';
}
}
Then go to Enfold > General Styling > Quick CSS and add this CSS code:
#top #header_main_alternate .main_menu {
display: flex;
flex-direction: column-reverse;
}
.news-header h3 {
color: #0e4194;
font-size: 18px;
}
Hope it helps.
Best regards,
Nikko
Hey tulin88,
Thank you for the inquiry.
You can add the following css code to adjust the size and color of the social icons.
#top .social_bookmarks li {
width: 60px;
}
#top .social_bookmarks li a {
width: 60ox;
line-height: 60px;
min-height: 60px;
font-size: 30px;
}
#top .header_color .social_bookmarks a {
color: red;
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterward.
Best regards,
Ismael
Hey tcampaner,
Please try the following in Quick CSS:
.page-id-976 .av-masonry-entry-title {
font-size: 14px;
}
Best regards,
Rikard
Hi,
I would like to change the font size of the text that appears in the Masonry Gallery on this page: https://cf.studiocampaner.ro/governance-e-gruppi/
Thank you!
Hello Support
1) How can I change the setting for the animation of the text that is written on the caption of the easy slider?
2) Also when selecting H1 or H2 font size – the text gets capitalized.
Hi,
Most elements have options to apply settings for mobile, tablet, & desktop independently, try looking for these icons in your elements:

So for example the negative margin used to overlay your three boxes over the top video is probably set using the first device icon in the screenshot which is for all devices, try moving the negative margin to the desktop icon so it’s not used for tablet or mobile.
So elements has these options for font sizes, if you don’t see this look at the options at: Enfold Theme Options ▸ General Styling ▸ Typography ▸ Advanced Options: Customize Typography Settings where you can set global font sizes for headings.
Best regards,
Mike
Mike,
So i dug further and it’s not a matter of even using it in the content anywhere. Just by virtue of having the plugin (GravityView) installed is causing this error.
“I don’t see that we can correct this plugin in the theme.” – It’s not a matter of fixing the plugin, it’s about fixing how the theme handles shortcodes from other developers. Enfold’s “balance shortcode” feature is what is throwing the errors. Somehow, however Enfold grabs the available shortcodes it’s trying to balance, it grabs that as one of the available shortcodes. It tries to create a regex from it and fails.
In class-shortcode-parser.php in balance_shortcode() this is the $shortcodes variable it’s trying to process and dying on. With that you should be able to patch the theme so it handles anomalies like this properly.
Array
(
[0] => wp_caption
[1] => caption
[2] => gallery
[3] => playlist
[4] => audio
[5] => video
[6] => embed
[7] => expand
[8] => colomat
[9] => expandsub1
[10] => expandsub2
[11] => expandsub3
[12] => expandsub4
[13] => expandsub5
[14] => expandsub6
[15] => expandsub7
[16] => expandsub8
[17] => expandsub9
[18] => expandsub10
[19] => expandsub11
[20] => expandsub12
[21] => expandsub13
[22] => expandsub14
[23] => expandsub15
[24] => expandsub16
[25] => expandsub17
[26] => expandsub18
[27] => expandsub19
[28] => expandsub20
[29] => expandsub21
[30] => expandsub22
[31] => expandsub23
[32] => expandsub24
[33] => expandsub25
[34] => expandsub26
[35] => expandsub27
[36] => expandsub28
[37] => expandsub29
[38] => gv_note_add
[39] => gv_entry_link
[40] => gv_edit_entry_link
[41] => gv_delete_entry_link
[42] => year
[43] => av_privacy_allow_cookies
[44] => av_privacy_accept_essential_cookies
[45] => av_privacy_google_tracking
[46] => av_privacy_google_webfonts
[47] => av_privacy_google_maps
[48] => av_privacy_video_embeds
[49] => av_privacy_google_recaptcha
[50] => av_privacy_custom_cookie
[51] => av_privacy_accept_button
[52] => av_privacy_accept_all_button
[53] => av_privacy_do_not_accept_button
[54] => av_privacy_modal_popup_button
[55] => av_privacy_link
[56] => av_privacy_cookie_info
[57] => av_sb_instagram_feed
[58] => av_leaflet_map
[59] => av_productgrid
[60] => av_productlist
[61] => av_product_button
[62] => av_product_info
[63] => av_product_review
[64] => av_product_tabs
[65] => av_product_upsells
[66] => avia_sc_product_meta
[67] => av_product_price
[68] => av_productslider
[69] => gravityform
[70] => gravityforms
[71] => wpseo_breadcrumb
[72] => gravityview
[73] => gventry
[74] => gvfield
[75] => gvlogic
[76] => gvlogic2
[77] => gvlogic3
[78] => gvlogicelse
[79] => tribe:event-details
[80] => boxzilla_link
[81] => av_player
[82] => av_playlist_element
[83] => av_blog
[84] => av_buttonrow
[85] => av_buttonrow_item
[86] => av_button
[87] => av_button_big
[88] => av_catalogue
[89] => av_catalogue_item
[90] => av_chart
[91] => av_chart_dataset
[92] => av_codeblock
[93] => av_one_full
[94] => av_one_half
[95] => av_one_third
[96] => av_two_third
[97] => av_one_fourth
[98] => av_three_fourth
[99] => av_one_fifth
[100] => av_two_fifth
[101] => av_three_fifth
[102] => av_four_fifth
[103] => av_comments_list
[104] => av_contact
[105] => av_contact_field
[106] => av_content_slider
[107] => av_content_slide
[108] => av_countdown
[109] => av_events_countdown
[110] => av_upcoming_events
[111] => av_gallery
[112] => av_horizontal_gallery
[113] => av_google_map
[114] => av_gmap_location
[115] => av_layout_row
[116] => av_cell_one_full
[117] => av_cell_one_half
[118] => av_cell_one_third
[119] => av_cell_two_third
[120] => av_cell_one_fourth
[121] => av_cell_three_fourth
[122] => av_cell_one_fifth
[123] => av_cell_two_fifth
[124] => av_cell_three_fifth
[125] => av_cell_four_fifth
[126] => av_heading
[127] => av_headline_rotator
[128] => av_rotator_item
[129] => av_hr
[130] => av_font_icon
[131] => av_icon_circles
[132] => av_icon_circle_item
[133] => av_icon_box
[134] => av_icongrid
[135] => av_icongrid_item
[136] => av_iconlist
[137] => av_iconlist_item
[138] => av_image
[139] => av_image_diff
[140] => av_image_hotspot
[141] => av_image_spot
[142] => av_partner
[143] => av_partner_logo
[144] => av_lottie
[145] => av_magazine
[146] => av_mailchimp
[147] => av_mailchimp_field
[148] => av_masonry_entries
[149] => av_masonry_gallery
[150] => av_submenu
[151] => av_submenu_item
[152] => av_notification
[153] => av_animated_numbers
[154] => av_portfolio
[155] => av_post_metadata
[156] => av_metadata_item
[157] => av_postcontent
[158] => av_postslider
[159] => av_progress
[160] => av_progress_bar
[161] => av_promobox
[162] => avia_sc_search
[163] => av_section
[164] => av_slideshow
[165] => av_slide
[166] => av_slideshow_accordion
[167] => av_slide_accordion
[168] => av_feature_image_slider
[169] => av_fullscreen
[170] => av_fullscreen_slide
[171] => av_slideshow_full
[172] => av_slide_full
[173] => av_social_share
[174] => av_tab_section
[175] => av_tab_sub_section
[176] => av_table
[177] => av_row
[178] => av_cell
[179] => av_tab_container
[180] => av_tab
[181] => av_team_member
[182] => av_team_icon
[183] => av_testimonials
[184] => av_testimonial_single
[185] => av_textblock
[186] => av_timeline
[187] => av_timeline_item
[188] => av_toggle_container
[189] => av_toggle
[190] => av_video
[191] => av_sidebar
[192] => av_dropcap1
[193] => av_dropcap2
[194] => gravityview_widget_search
[195] => gravityview_widget_custom_content
[196] => gravityview_widget_gravity_forms
[197] => gv\widgets\page_size
[198] => gravityview_widget_pagination_info
[199] => gravityview_widget_page_links
)
Hey es.design.ma,
Thank you for the inquiry.
Have you tried using the “em” or “i” tag to emphasize or italicize the caption title?
Example:
<em>Hello World!</em>
<i>Hello Universe!</i>
If you would like to use css, please add this code.
#top .av_slideshow_full .avia-caption-title {
font-style: italic;
}
Best regards,
Ismael
Hey Beat,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field and adjust to suit:
#top label.input_checkbox_label {
font-size: 10px;
line-height: 10px;
font-weight: normal;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Thanks. Your fix only affects part of the blog text, namely the
- … section at the bottom.
This
#top .all_colors p {
font-size: 16px;
}
is over-riding the 18.4px declaration, and adding !important to .entry-content-wrapper doesn’t work either.
I didn’t realise the smaller font size would narrow the blog container. I’ll have a re-think about the size and layout. Case closed!
Hi zimbo,
Thanks for the detailed information and links.
The only difference between both sites is the size of fonts which affects the width of the blog container.
You can change the font size but since it will affect other parts of the website, please try to add this CSS code in Enfold > General Styling > Quick CSS instead:
#top .fullsize .template-blog .post .entry-content-wrapper {
font-size: 18.4px;
}
Hope it helps.
Best regards,
Nikko
I am building a new website for a client based on the Hotel template. I successfully imported the demo and am in the process of creating the pages.
An issue has arisen regarding the blog layout, specifically the width of the element div.entry-content. The entry-content-wrapper on both sites is 800px wide. I have made no changes to the post on the development site, it is as it was installed/setup. I assume that the settings in Theme Options > Blog Layout would have been copied in from the demo settings.
In the demo here, div.entry-content is 736 px wide. But on the development site here, the element is only 598 px wide. I cannot deduce why it is narrower and would like it as per the demo.
I’m using a smaller font size for <p>, but that should not make a difference to the element width. Have you any ideas/suggestions for the difference in width? And how to fix it…