Hi,
I added this css:

#top .all_colors h1 {
	font-size: 18px;
}
#top .all_colors h2 {
	font-size: 14px;
}

check now.

Best regards,
Mike

Hi,
Can you link to a page that it doesn’t work and explain if it is a header or the paragraph font-size that you wish to change and what size you want it to be.

Best regards,
Mike

Hey fabienneRedUmb,

Thank you for the inquiry.

You can leave the Heading Font Sizes and Subheading Font Sizes of the Special Heading elements set to Default, and define the font size for headings (h1, h2, h3, etc.) in the Enfold > Advanced Styling panel. Afterward, you can add the following css code to adjust the default size of the subheading element relative to the configurations or style adjustments made in the Advanced Styling panel.

#top .av-subheading {
    font-size: 1.2em !important;
}

Best regards,
Ismael

Hi,

Thanks for that. Please try this in Quick CSS:

.learndash-wrapper * {
  font-family: verdana;
  font-size: 13px;
}

I couldn’t find a list in your content though? Please add one so that we can check that problem as well.

Best regards,
Rikard

Hi,

Thganks for the clarification. Please try this in Quick CSS:

.grid-sort-container .grid-entry-title a {
  font-size: 16px;
}

.grid-sort-container .grid-content {
  padding: 4px 20px 20px 20px;
}

Best regards,
Rikard

Hi,
When I try the the Enfold Theme Options ▸ Advanced Styling ▸ H3 option as Ismael suggested it works correctly:


But if you only want this font change on one page, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-30 .slide-entry-wrap h3.slide-entry-title {
	font-size: 18px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Maggie,

Thank you for the inquiry.

You should be able to adjust the font size in the Enfold > General Styling > Typography tab or in the Enfold > Advanced Styling panel. Edit the h3 element.

Best regards,
Ismael

Hey DermaBBSaar,
Thanks for your question, but the site that you have linked to doesn’t seem to be built with Enfold and doesn’t use the LayerSlider.
For Enfold & the LayerSlider on mobile, typically Enfold doesn’t have a transparent header for mobile, so on mobile the LayerSlider will be below the header, while on desktop with a transparent header the LayerSlider shows to the top behind the header.
Also in the LayerSlider, typically the desktop slider is in a landscape format, but mobile devices use a portrait format, so a desktop slider will scale down to show the whole slider.
Typically people will create two sliders one of desktop and the other in a portrait layout to show on mobile, if they want more that a scaled down slider.
If you have some experience with the LayerSlider, it is possible to use one slider and have the desktop and mobile elements and layout set for all devices, but this can be tricky, here is a basic example of the LayerSlider device options used to show different elements and different sizes. You could also watch some YouTube tutorials. But it is a lot easier to use two sliders and display one or the other.
So if this describes your situation please give this a try.

Best regards,
Mike

Hey UPON,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .formcraft-datepicker .ui-datepicker-title select {
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    box-shadow: none;
    padding: 0 0.5em!important;
    height: 2.9em;
    vertical-align: top;
    margin: 0;
    border: 0;
    background: 0 0;
    cursor: pointer;
    width: auto;
    display: inline-block;
    font-size: inherit;
    border-radius: 0;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
This in the expected results:

Best regards,
Mike

Hi,
When I checked your site the blue background color for the “COSMETIC, FAMILY & SPECIALTY DENTISTRY” section and the background image and font size for the “New Patient Offers” only show when I’m logged in. This is due to your caching plugin, WP Rocket, note that the cache settings shows the cache for mobile devices and logged out users:

So your WP Rocket cache needs to be cleared. I did this and checked your site again logged out and incognito and now your sections show correctly.
I checked with Windows in Chrome, Firefox, & Edge and it is showing correctly now, Please note that testing Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
If you find that after making edits to your site you see this issue a again, I recommend disabling your caching plugin until you are done creating your site, often caching causes issues while people are creating the sites, your caching should be activated only after your site is done so you don’t need to fight with it.

Best regards,
Mike

Hi,

Thank you for the update.

We edited the code a bit. Please remove the previous code and replace it with the following.

#top #wrap_all #av-burger-menu-ul>li {
    opacity: 100;
    position: relative;
    top: 0;
    transition: none;
    transform: none;
    left: 0;
    right: auto;
    text-align: left;
    border-bottom: 0.1em solid #fff!important;
    text-align: left;
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
}

#top #wrap_all #av-burger-menu-ul>li:first-child {
    border: none !important;
}

Best regards,
Ismael

Hi,

Thank you for the screenshot.

The heading seems to be resizing correctly on our end, but if you still want to adjust it, you can try this css code.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top #wrap_all .av-special-heading.av-1kii6-20aefa4b8a1e86b824c2b08956737de9 .av-special-heading-tag, #top #wrap_all .av-special-heading.av-3yvx2-b3a74335a955a8c783977b3748088567 .av-special-heading-tag, #top #wrap_all .av-special-heading.av-12jlsm-3c4c1638e4edbfc505398e6c922fa44b .av-special-heading-tag, #top #wrap_all .av-special-heading.av-118a8u-b260f37eef566a9c2d56de7e85194bae .av-special-heading-tag {
    font-size: 1.2em;
  }
}

Best regards,
Ismael

Hi,

Thanks for that. This media query doesn’t seem to be closed:

@media only screen and (min-width:989px) {
.phone-info { font-size: 14px; padding-top: 20px; padding-bottom: 20px; padding-right: 100px;}

Best regards,
Rikard

Hey Martin,

Please try the following in Quick CSS under Enfold->General Styling:

td {
    font-size: 16px;
}

Best regards,
Rikard

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: left;
    font-size: 16px;
}

Best regards,
Rikard

Hey Anton,

Thank you for the inquiry.

Adding this css code should remove the space below the video.

.su-youtube.su-u-responsive-media-yes {
    margin-bottom: 0;
}

The double button on the official site is not available by default, but here is the markup in case you want to use it on your own site.

HTML:

<div class="avia-double-buttons "><a href="https://site.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://1.site.market/" class="avia-double-button avia-double-button-2">Purchase Now</a></div>

CSS:

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
    text-decoration: none;
}

#top div .main_color .avia-double-button {
    border-color: #e1e1e1;
    background: #fcfcfc;
    color: #222222;
}

#top #wrap_all .avia-slide-wrap .avia-double-button, #top #wrap_all .avia-hover-fx .avia-double-button {
    background: #000;
    background: rgba(0,0,0,0.2);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 26px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -14px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 10px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

Best regards,
Ismael

Hey cambium.digital,

Thank you for the inquiry.

Layer Slider should automatically calculate the size of the text or layers based on the viewport or screen size. For example, if you set the font size of a text layer to 23px on desktop, LS should automatically resize this text to around 8-11px on mobile view. If you really need to manually control the style of a specific layer on different screen sizes, you can apply a custom ID or class name to it in the Layer Settings > Attributes panel. You can then add your own css modifications in the Quick CSS field or in the child theme’s style.css file.

Best regards,
Ismael