Hey Richard,
Thanks for contacting us!
Advanced Styling options overrides all options. If you would like to set default font size to 16px, please do so in Enfold theme options > General Styling > Typography > Default Content Font Size :)
Best regards,
Yigit
-
This reply was modified 3 years, 1 month ago by
Yigit.
Hi,
Thank you for following up.
The Heading Style has to be set to something else in order to access the Font Size settings in the Styling panel. The size of the heading in the “educazione” page is different because the Font Size was set to 70px. We set it back to the default font size.
Best regards,
Ismael
When I change the “P” font size via: Advanced Styling >> Select an element to style >> <p> (which I increased to 16px) it does change the style through the site, but it overrides the custom styling in “Text Block” Font Size options. Is that normal?
Thanks,
Richard
Hey ddzaviza,
Thank you for the inquiry.
You can use this css code to adjust the font size of the heading element on mobile view.
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
#top #wrap_all .all_colors h3 {
font-size: 20px;
}
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css, and purge the cache.
Best regards,
Ismael
Hey kenshejoe,
Did you try setting smaller font sizes for smaller screens under Styling->Font Sizes for each slide?
Best regards,
Rikard
Where do I change the body font size? It used to be in the General Settings under “Fonts” but now the setting is no longer there.
I’m using Enfold 5.3.1.1
Wordpress: 6.1.1
Hello Ismael,
thank you for your hint.
Unfortunately, I really cannot find where I could adjust that setting. I find no place in the styling section that controls that specific element.
There is a box called All Headings [H1-H6] but it does not contain font size settings. Then there is a box for Heading H3 which sets font size to 20.
But I cannot find any settings for the specific element “Special Title”. The two titles in the two pages I mentioned are both in a “Special Title” content element and are both set to H1.
I have the same problem elsewhere. This page page link there are three main titles. They are all in Special Title content elements and all are set to H1, but the one in the middle appears bigger then the others.
Can you help please?
Best regards,
Elena
Hey Andrew,
Thank you for the inquiry.
You can add this css code in the Quick CSS field to adjust the style of the filters on mobile view.
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.av-elegant-toggle .taglist a {
line-height: 2.8em;
font-size: 0.8em;
padding: 7px 10px;
}
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings and purge the cache after adding the css.
Best regards,
Ismael
Hi,
Thank you for the update.
The font size of of the special heading “Educazione consapevole del cane” has been set to 70px, while the other title is set to use the default font size for heading elements. You might have adjusted the Styling > Heading Font Sizes settings of this particular element. Please try to edit the element and adjust the font size settings accordingly.
Best regards,
Ismael
Hello,
I am using the Health Coach demo with some modifications. I was trying to change the titles font sizes in the advanced style options of the child theme and when I went to check the homepage I found that the title over the fullwidth slider had turned to black and uppercase. I removed all the modifications I had made and the title returned to white, but I cannot find how to make it go back to lowercase.
In general, I cannot understand which settings control the slider title and subtitle in the homepage.
I also would like to modify the buttons that appear over the same homepage slider and make them both transparent.
Can you help?
I attach a username and password for you so you can login if needed
Thanks
Elena
PS I see now that also the titles in the portfolio and other pages are now uppercase, but not the titles in the homepage below the slider
-
This topic was modified 3 years, 1 month ago by
elenagrassi.
-
This topic was modified 3 years, 1 month ago by
elenagrassi.
Hi,
Thanks for explaining further, but this is not what I’m seeing, the content in each of the tabs are independent heights, this can easily be seen at mobile screen widths where the sub-menu KULTUR/BILDUNG is always below the content.
For desktop the sub-menu KULTUR/BILDUNG is always at the bottom of the page because of this custom css:
.untermenu {
top: 94%;
width: 100%;
position: fixed !important;
text-align: center;
left: -5px;
font-size: 15px !important;
text-transform: uppercase;
letter-spacing: 1px;
color: #222222;
}
Notice the top: 94%; and position: fixed !important; this fixes the sub-menu 94% from the top.
Remove this custom css and the sub-menu will be just below the content.
Best regards,
Mike
Thank you Mike, I added the code for the table of contents as well
.single-post .entry-content li {
font-size: 18px !important;
}
I can see the single post entry has changed so just waiting the hosting cache to catch up for the table of contents, appreciate the help.
Andrew
Hey Andrew,
Thank you for the link to your site, the correct css is:
.single-post .entry-content p {
font-size: 18px !important;
}
I adjusted this for you.
If you want your Table of Contents and list items to also have this font size try adding this css:
.single-post .entry-content li {
font-size: 18px !important;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
How can I change the padding on mobile? I have text block on color section with video.
Tried also to change the font size on text block, but it didn’t make any difference.
Hi, I have added the code found on the forum to adjust the size of the text on blog posts only.
.blog .entry-content p {
font-size: 18px !important;
}
I have flushed the cache on my browser and on my hosting. I also waited a day to double check, but still nothing has changed, it remains at 21px
Could you please check to see what I am doing wrong? and when the text does adjust to 18px will this also take affect on mobile or does there need to be an additional snippet of html code added?
Thank you in advance
Andrew
Hi – Any suggestions on how to take the link show below in the button shortcode (https://www.getdrip.com/forms/xxxxx/submissions/new) and add in the following: data-drip-show-form=”xxxx”. ?
For reference — as a regular link, here’s how it looks:
<a href="https://www.getdrip.com/forms/xxxxx/submissions/new" data-drip-show-form="xxxx">Show form</a>
BUTTON SHORTCODE
[av_button label='Show form' icon_select='yes' icon='ue82b' font='entypo-fontello' icon_hover='aviaTBaviaTBicon_hover' link='manually,https://www.getdrip.com/forms/xxxxx/submissions/new' link_target='' size='x-large' position='left' label_display='' title_attr='' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']
Hey Peter,
Thanks for contacting us!
You can go to Enfold theme options > General Styling > Typography > Default Content Font Size or you can go to Enfold theme options > Advanced Styling and edit Body to adjust font size :)
Best regards,
Yigit
Hi folks. I’ve seent that you can easily add a button to an Easy Slider by pasting the shortcut code to the “Caption text” section of the slide.
I’ve been using this shortcode that I’ve found in one of your examples:
[av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']
if I add more than one in the same Caption text field, the buttons are shown one on top of the other in a column, all aligned to the left of the slide.
See the screenshot: https://imgur.com/xvzBk0b
How can I have the buttons aligned side by side, in a row, with some space between them, and all CENTERED horizontally (and if possible also VERTICALLY) insode the slide?
Thanks in advance!
Bye,
A.-
Hi,
Thank you for the update.
To make the default thumbnails and copy larger in the magazine element, please try the following css code.
.av-magazine-thumbnail {
width: 180px;
min-height: 180px;
}
.av-magazine-thumbnail img {
height: 180px;
width: 180px;
}
.av-magazine .av-magazine-content-wrap .av-magazine-title {
font-size: 2rem;
line-height: 1.4em;
}
.av-magazine .av-magazine-content {
font-size: 1rem;
line-height: 1.3em;
}
This code will increase the font size of the copy and set the width and height of the thumbnails to 180px. You can adjust these values as needed to achieve the desired size for the thumbnails and content.
I hope this helps! Let me know if you have any other questions or if you need further assistance.
Best regards,
Ismael
Hi,
Thank you for the inquiry.
To change the weight and color of the text in the recent portfolio sidebar widget, you can try using the following CSS:
#top .main_color strong.news-headline {
color: red !important;
font-weight: 400;
font-size: 0.7rem;
}
Note that the !important keyword is used to ensure that these styles take precedence over any other styles that might be applied to the element.
It’s also possible that there might be other styles that are conflicting with the styles you have defined. In this case, you might need to use more specific selectors to target the element you want to style.
For example, you could try using a combination of the element type, class, and/or ID to create a more specific selector. This can help to ensure that your styles are applied correctly.
I hope this helps! Let me know if you have any other questions or if there is anything else I can assist with.
Best regards,
Ismael
/*sidebar text sizes*/
.news-link { font-size: 14px; font-weight: 100 !important; }
Sorry actually this was the successful code to change the size.
On this page fr instance:
https://asiamluxe.com/portfolio-item/love-at-first-bite-how-the-love-for-south-vietnamese-cuisine-inspired-madame-vo-eateries-in-nyc/
I want to change the weight, color and size of the text in the recent portfolio sidebar widget.
In my attempt the size is working, for the weight not so. Also tried to color the text here but to no avail. Something overriding the css I suppose
/*sidebar text sizes*/
.sidebar .widgettitle { font-size: 14px; font-weight: 100 !important; }
Do you have a css hack for me?
Thanks
Hey schweg33,
Thank you for the inquiry.
Are you referring to the alignment of the privacy buttons? If you want to align the buttons in a single row, please add this css code.
@media only screen and (max-width: 480px) {
.responsive .avia-cookie-consent .container a {
font-size: 0.7em;
padding: 0.8em 1em;
}
.responsive .avia-cookie-consent p.avia_cookie_text {
margin-bottom: 1em;
}
}
Best regards,
Ismael
Hi,
Thanks for the link to your site, for your homepage slider I adjusted the font sizes for the mobile size so the text will fit on the screen better:

and I add this css to make the mobile slide image a little bigger to show your text better:
@media only screen and (max-width: 767px) {
#top.home #full_slider_1 .avia-slideshow-inner,
#top.home #full_slider_1 .avia-slideshow-inner img {
height: 420px;
}
}
please clear your browser cache and check and see the screenshot in the Private Content area.
Best regards,
Mike
Hi
I am using the Enfold Band theme template. The header/title seems to resize perfectly for desktop & tablet, but for the phone, it is cut off no matter what I do.
Everything below that seems to be fine.
I thought at first it was because I had tried a custom font, but even with default Arial, I have the same result.
Please advise.
Thanks,
John
Hi Nic_007,
Can you try adding this CSS code in Enfold > General Styling > Quick CSS:
@media only screen and (max-width:767px) {
#av_section_1 .av-special-heading-tag {
font-size: 32px !important;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
background-color: transparent;
}
}
Best regards,
Nikko
Hi Patrick,
Thanks for pointing it out to us, the documentation should be fixed shortly.
As for the CSS code, you can use this:
/*------------------------------------------------
------------------------------------------------
Accordion style 2
------------------------------------------------
-------------------------------------------------*/
/* Tab title style */
.av-accordion-style-2 .toggler {
font-size: 18px;
font-weight: bolder;
padding: 10px 15px;
text-transform: uppercase;
margin: 2px 0;
background: #B5DCFD;
}
.av-accordion-style-2 .activeTitle.toggler:hover,
.av-accordion-style-2 .activeTitle.toggler,
.av-accordion-style-2 .toggler:hover {
color:#FFF;
background: #1869FF;
}
/* Extra content in tab title */
.av-accordion-style-2 .toggler span.extra-content {
display: block;
clear: both;
font-size: 13px;
line-height: 1.5em;
font-weight: lighter;
opacity: .65;
padding: 5px 0;
text-transform: none;
}
/* Accordion icon */
.av-accordion-style-2 .toggle_icon:before {
position: absolute;
font-size: 18px;
top:50%;
transform: translateY(-50%);
left: 0;
content:"\e875";
font-family: 'entypo-fontello';
line-height: 0;
}
/* Active tab icon */
.av-accordion-style-2 .activeTitle .toggle_icon:before {
content:"\e873";
font-family: 'entypo-fontello';
}
/* Hide default icon */
.av-accordion-style-2 .toggle_icon {
border:none;
position: absolute;
left: auto;
right: 20px;
}
.av-accordion-style-2 .toggle_icon .vert_icon,
.av-accordion-style-2 .toggle_icon .hor_icon {
display:none;
}
/*Toggle content area */
.av-accordion-style-2 .toggle_content {
background: #ced7df;
}
Hope it helps.
Best regards,
Nikko
Hi woogie07,
Please try to add this CSS code:
@media only screen and (max-width:767px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
font-size: 36px !important;
}
}
Just change the font size as you see fit.
Best regards,
Nikko
Hi,
Please try this css to change the size of the date:
#top #wrap_all .all_colors h2.av-milestone-date {
font-size: 23px;
}
adjust the number to suit.
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hi,
I’m trying to customize the Tab section on a website using the instructions from the Enfold documentation at https://kriesi.at/documentation/enfold/tab-sections/#toggle-id-1
I would like the tab section to appear similar to what is shown on https://kriesi.at/themes/enfold-2017/elements/tab-section/ A screenshot of what I’m trying to achieve can be seen at https://snipboard.io/KrHgwW.jpg
The problem I’m having is when I use the CSS from the Tabs Section documentation (shown below) it doesn’t work for me. I’m using Enfold v 5.3 with PHP 8.0. and only a security plugin is enabled at this time. A link to the page is in the private content. Thank you.
/*—————————————-
// Tabs Element Styling
//————————————–*/
/* Tab icon size */
span.av-tab-section-icon:before {
font-size: 76px!important;
}
/* Tabs */
#top .tabcontainer .tab {
background: #27618d;
color: #eeeeee;
border: none!important;
}
#top .tabcontainer .tab:hover {
color: #ffffff!important;
}
/* Active tab */
#top .tabcontainer .active_tab {
background: #ffffff!important;
color: #000;
border: none!important;
}
/*Active tab on hover*/
#top .tabcontainer .tab.active_tab:hover {
color: inherit!important;
}
/* tab content */
#top .tabcontainer .tab_content.active_tab_content {
background: #ffffff!important;/*border:none!important;*/
}