Hi,
Try this css instead where the line height matches the font size:

@media only screen and (max-width: 767px) { 
	.avia-table a {
		font-size: 16px;
	}
	.avia-table li {
		line-height: 16px;
	}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
	.avia-table a {
		font-size: 12px;
	}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey schweg33,
Thank you for the link to your site, but it looks like we won’t be able to see your elements without a login.
What font size do you want to use for mobile?

Best regards,
Mike

Hi,
The css classes .site-header & .top-bar are not typical for Enfold, I would recommend this css:

#header_meta .container {
min-height: 60px;
}

#header_meta .container * {
font-size: 16px;
}

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.
If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hey joandjaxx,
Please remove this css:

[data-av_icon]:before {
    font-size: 50px!important;
}

and use this instead:

.iconbox_icon[data-av_icon]:before {
    font-size: 50px!important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

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