Hey joandjaxx,

Thank you for the inquiry.

You can replace the modification with the following code.

/* Icon Size */
.iconbox [data-av_icon]:before {
    font-size: 50px!important;
}
.iconbox_icon {
    margin-right:20px!important;
}

Best regards,
Ismael

Hey biggsuccess,

Thank you for the inquiry.

We have found an extra curly brace in the css code above, which renders the css rules below it invalid. We also adjusted the position of the css media queries.

.main_menu {
  background: white;
}

#top #header_meta a,
#top #header_meta li,
#top #header_meta .phone-info {
  font-size: 14px;
}

.avia-layerslider {
  box-shadow: none !important;
  border-top-width: 0 !important;
}

div#after_layer_slider_1 {
  border-top: none !important;
}

.home #main>.container_wrap_first>.container>.content {
  padding-bottom: 0;
}

@media only screen and (max-width: 430px) {
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 182px !important;
  }
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  .responsive #top #wrap_all #main {
    padding-top: 119px !important;
  }
}

@media only screen and (max-width: 768px) {
  .responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100% !important;
  }

  .responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
    padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
  }

  .responsive #top #header #header_main .inner-container .widget>div {
    padding: 0;
  }

  .responsive #top #header #header_main .inner-container .widget>div>div {
    text-align: center;
  }
}

Best regards,
Ismael

Hey maryenvato,

Thank you for the inquiry.

We can add a few css modifications in the Enfold > General Styling > Quick CSS field to adjust the style of the first column on smaller screens. Please start with this css code.

@media only screen and (max-width: 768px) {
  /* Add your Mobile Styles here */
  .av_textblock_section.av-lr4yjeic-cd8285095e8d65e185685adbb051d6f7 table th.avia-desc-col {
    font-size: 0.9em;
    word-break: break-word;
    width: 130px;
  }
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after applying the modification.

Best regards,
Ismael

Hi,

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

@media only screen and (max-width: 990px) {
.page-id-8445 h2 {
  font-size: 18px; 
}
}

Best regards,
Rikard

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