Hi Henning,

Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab:

#top .special_amp {
    font-size: inherit;
    line-height: 1;
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
}

Best regards,
Yigit

Hey Fairbanks_Seeds,

Thank you for the inquiry.

Did you adjust the Heading Font Sizesoptions in the Styling > Font Sizes panel? The Content > Heading Style should be set to Modern prior.

Best regards,
Ismael

Hi,

Thanks for that. You can set the main menu font size under Enfold->Advanced Styling. I tried it out on your installation, and it’s working as expected.

Best regards,
Rikard

Hey Tim,

Thank you for the inquiry.

You can adjust the font size of the h1 element by using this css code.

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

  /* Add your Mobile Styles here */
  #top #wrap_all .header_color h1,
  #top #wrap_all .main_color h1,
  #top #wrap_all .alternate_color h1 {
    font-size: 32px;
  }
}

You can also adjust the font settings of the headings and body text in the Enfold > General Styling > Typography panel.

Best regards,
Ismael

Hi,

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

#top #wrap_all .social_bookmarks:hover a {
  background-color: #000;
}

#top #wrap_all .social_bookmarks a:before {
  font-size: 16px;
}

The documentation you linked to is for the social share element, not the icons in the header. I’m not sure which example you would like to mimic, but I don’t think large rectangle buttons would look nice or fit inside the header unfortunately.

Best regards,
Rikard

Hey woogie07,

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

.av-subnav-menu li {
  font-size: 16px;
  font-weight: bold;
}

Best regards,
Rikard

Hi,

You can use the following code to adjust the colors of the error field:

.av-fields-with-error {
  font-size: 20px;
  color: white;
  background-color: black;
  border-color: orange !important;
}

If you need specific customization, please hire a freelance developer.

Regards,
Yigit

Hi,
Thank you for the link to your site, I see the css from the other thread is in your Quick CSS:

#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
    font-size: 36px;
}
#top .avia-slideshow .avia-caption-content p {
    font-size: 20px;
}

and on your /news/ page you are only using 8 slides, when I change to 12 by cloning the last iten 4 more times and clear my browser cache and check with Windows in Chrome, Firefox, & Edge & Mac in Safari, Chrome, Firefox all items show correctly.
Perhaps when you added the other items your cache was not fully cleared, Please note that 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.
I removed the extra items, please try adding the new slides that you want and clear your cache, perhaps a couple of times, and if that doesn’t help please let us know so we can look and help.

Best regards,
Mike

Hey steveorrmedia,
Thank you for your patience and the links, so based on your description for the first three issues, that are all for heading text being cut off at screen sizes below 480px, while it is possible to break the words with a hyphen, I don’t think this will look good so a better option is to reduce the font size for small screens.
The Special Heading element that you are using on these three pages has an option to do this, please go to the styling tab and look for Heading Font Sizes then click the icon for the small device screen and adjust the font size to about 37px.

You could also adjust the Subheading Font Sizes if you wish. I did this for your /message-development/ page special heading, and now the text fits at the smallest screen sizes, please clear your browser cache and check, and then try this for your other pages.
Fot your last issue with the logos being too close together on small mobile when they are in a single column, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 479px) { 
	#top .avia-logo-element-container .slide-entry {
    padding: 10px;
	}
}

and feel free to adjust the 10px to suit if it is not enough
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,

Please add the following code to the bottom of the Quick CSS field and adjust it as needed:

.avia-data-table td {
  font-size: 16px;
}

Best regards,
Yigit

Hi,

Thank you for the info.

Looks like the other slides still have the default h2 styles, not the styles set in the Styling > Font Sizes panel.

This is the custom style of one of the slides, configured in the Styling > Font Sizes.

#top #wrap_all .avia-slideshow .av-slideshow-caption.av-lhewf3ia-c0fce5f319dd1be36b426af6eda71d3c__7 .avia-caption-title {
    font-size: 36px;
}

And this is the default h2 style, which is still applied to some of the slider items.

#top #wrap_all .main_color h2, #top #wrap_all .alternate_color h2, #top #wrap_all .footer_color h2, #top #wrap_all .socket_color h2 {
    font-size: 15px;
    font-family: 'arial', Helvetica, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

Please check the slider settings, then toggle or temporarily disable the Enfold > Performance > File Compression settings.

Best regards,
Ismael

Hi!

Thank you for the inquiry.

The following css rule appears above the header, which might be causing the issue that you described above. Did you add the code somewhere in the template files?

av-image-caption-overlay { bottom: -20px !important; font-size: 10px !important; height: auto !important; left: 50% !important; transform: translate(-50%) !important; width: 100% !important; text-align: justify !important; }

Cheers!
Ismael

Hey,

You have the following custom CSS code:

.av-fields-with-error {
  font-size: 20px;
  background-color: rgba(0,0,0,0);
  border: 0;
}

With this code you’re setting background color to transparent. Modify this code to change the background color.

Best regards,
Yigit

Hey OneOfMany,

Thank you for the inquiry.

You can adjust the font sizes for different screen width in the Enfold > Genera Styling > Typography panel. Additional style adjustments can be done in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hey charger70,

Thank you for the inquiry.

You may have provided a different URL. Please provide the URL of the site shown in the screenshot. Have you tried editing the Styling > Font Sizes settings of the slide?

Best regards,
Ismael

Hi,
I reviewed the code in the pastebin and it looks like the code was doubled, and this was noted in the other thread, so I removed the extra code and also commented out the extra line:
content_wrap.avia_swipe_trigger( {prev:'.av_prev_tab_section', next:'.av_next_tab_section'} );
and now the 4 icons are showing at the top in a grid instead of off the screen,

so if you are not seeing it like this then clear your cache or open a private window until you do.
If for small screens you want the 4 tabs to be in a single row, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 430px) { 
	#top.page-id-196 .av-section-tab-title {
    padding: 1px 2px 0px 2px;
	}
	#top.page-id-196 .av-tab-section-icon {
    font-size: 20px;
	}
	#top.page-id-196 .av-inner-tab-title {
    font-size: 10px;
	}
	#top.page-id-196 .av-section-tab-title {
    width: 25%;
	}
}

this is the expected results:

Best regards,
Mike

Hi,
To have very large menu items and align them at the top try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #av-burger-menu-ul {
	vertical-align: top;
}
@media only screen and (max-width: 767px) { 
#av-burger-menu-ul .avia-menu-text {
	font-size: 60px;
}
}
@media only screen and (min-width: 767px) { 
	#av-burger-menu-ul .avia-menu-text {
	font-size: 80px;
}
}

feel free to adjust to suit, this is the expected results:

Since the original question has been answered we will close this thread as it has now covered multiple topics, please note that we ask each thread to limit to one topic.
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike