Hi,
Change this css:

#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
	color: yellow;
}

to this:

#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
	color: yellow;
	font-size: 20px;
	line-height: 20px;
}

then add this css:

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
    line-height: 20px;
}

adjust to suit.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

To adjust the size and position of the slider arrows, try to add this css code:

#top .avia-smallarrow-slider .avia-slideshow-arrows a {
  opacity: 0;
  margin: 0;
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  font-size: 20px !important;
  top: 0;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
  height: 20px;
  width: auto;
  margin-top: 15px;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: relative;
  width: 120px;
  top: 20px;
  left: auto;
  height: 24px;
  right: 10px;
}

If you’re trying to disable the image overlay, add this code:

.image-overlay, .image-overlay .image-overlay-inside {
    display: none !important;
}

Best regards,
Ismael

Hi,

Try to use this css code to adjust the font size of the menu items inside the nav widget:

#top .widget_nav_menu li {
    font-size: 16px;
}

Best regards,
Ismael

Hi,

.main-title looks like a different font or font weight

Looks like the title is set to use a lighter font weight instead of the default 400. Did you configure the Heading elements in the Enfold > Advanced Styling tab? You can also adjust it with this css:

#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .socket_color h1 {
    font-weight: 400;
}

Regarding the burger/mobile menu, try to edit the Main Menu (Icon) elements in the Advanced Styling panel, or use this css code:

#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.8em;
}

.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover a, #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:hover {
    background-color: #333366;
    color: #ffffff !important;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

You can adjust the value for all breakpoints, including the first one, which applies to desktops or large screens. To adjust the style of the slider buttons on smaller screens, you can add the following css code:

/*
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: 768px) {

  /* Add your Mobile Styles here */
  #top .container .slideshow_inner_caption .avia-slideshow-button {
    margin-top: 10px;
    padding: 6px 8px;
    font-size: 13px;
  }
}

Best regards,
Ismael

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

#av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text {
	color: blue;
}
#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
	color: yellow;
}
.html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before {
	color: yellow;
	font-size: 20px;
}
#top #wrap_all #av-burger-menu-ul .menu-item-2846 {
	font-size: 12px !important;
}

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

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

@media only screen and (max-width: 767px) { 
.responsive #top.home #wrap_all #av_section_3 .flex_column.av_one_third {
	width: 31%;
  margin-left: 6px;
}
}
 @media only screen and (max-width: 500px) { 
 	#top.home #wrap_all #av_section_3.main_color .flex_column.av_one_third h3 {
    font-size: 0.6em;
 	}
 }
 @media only screen and (min-width: 501px) and (max-width: 767px) { 
 	#top.home #wrap_all #av_section_3.main_color .flex_column.av_one_third h3 {
    font-size: 0.9em;
 	}
 }

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

Best regards,
Mike

Hey bemodesign,

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

@media only screen and (max-width: 767px) {
  #top .isotope-item.special_av_fullwidth .av_table_col .entry-title {
    font-size: 24px;
  }
}

Best regards,
Rikard

Hey connect4consulting,

Thank you for the inquiry.

You can add this css code code to adjust the font size of the elements in the header and footer.

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

  /* Add your Mobile Styles here */
  .phone-info a {
    font-size: 12px !important;
  }

  #socket .sub_menu_socket li {
    line-height: 1.4em;
  }
}

Regarding the slider caption, try to edit the slides’ Styling > Font Sizes settings. You can define font size values for different breakpoints or screen sizes.

View post on imgur.com

Best regards,
Ismael

Hi,

Yes, the default content font size and typography settings are recent additions to the theme options. Regarding the line spacing, you can try this css code:

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

  /* Add your Mobile Styles here */
  .av-image-caption-overlay-center {
    line-height: 1em;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Glad you found the feature useful. You can use the following css code to adjust the size of the social icons and disable the animation.

.av-share-box ul li a {
    font-size: 30px;
    transition: none;
    opacity: 1;
    visibility: visible;
}

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

You may need to remove the body and p tag configs in the Enfold > Advanced Styling panel because they override the custom styling of the image caption. You can adjust the Default Content Font Size in the Enfold > General Styling > Typography panel instead.

Here is what it looks like after we removed the advanced styling of the p and body tags.

View post on imgur.com

`

Best regards,
Ismael

Hey William,

Thank you for the inquiry.

You can adjust the image caption’s font size in the Styling > Image Caption panel. Please check the screenshot below.

View post on imgur.com

Best regards,
Ismael

Hi,

Looks like this is only set when you adjust the Enfold > General Styling > Typography > Default Content Font Size settings. This overrides the default body font size.

Best regards,
Ismael

Hi,

This is what we see on a clean installation of version 7.1.

View post on imgur.com

And only –enfold-font-size-theme-content is declared in the themes/enfold/css/dynamic-css.php file, line 108.

Best regards,
Ismael

Hi,

Have you tried hiding the testimonial section on mobile view? You can toggle the Element Visibility settings in the Advanced > Responsive panel.

View post on imgur.com

You can also use this css code to adjust the size of the testimonial section on mobile view:

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

  /* Add your Mobile Styles here */
  .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
    font-size: 0.85em;
  }

  #top .av-large-testimonial-slider .avia-slideshow-arrows {
    position: absolute;
    width: 100%;
    bottom: 50px;
  }

  #top .avia-slideshow-arrows a.next-slide {
    right: -30px;
  }

  #top .avia-slideshow-arrows a.prev-slide {
    right: auto;
    left: -30px;
  }
}

View post on imgur.com

Best regards,
Ismael

Hey MomentumMarketingSupport,

Thank you for the inquiry.

You may need to avoid using the ID “comment” for the color section because this css rule gets applied to it.

#comment {
    width: 602px;
    height: 150px;
    padding: 10px 7px;
    font-size: 12px;
    margin: 0;
}

This is how it looks when the height property is disabled.

View post on imgur.com

Best regards,
Ismael

Hey Guenter,

Thank you for the inquiry.

We can’t find the enfold-font-size-content-font variable anywhere in the theme — only enfold-font-size-theme-content. Where did you see the enfold-font-size-content-font variable?

Best regards,
Ismael