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

Hey dryo1,

Thank you for the inquiry.

Have you tried adjusting the Styling > Font Sizes settings? You can set different values for different screen sizes.

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the inquiry.

We adjusted the code in the Quick CSS field a bit and temporarily disabled the Performance > File Compressions settings.

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

  /* Add your Mobile Styles here */
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    font-size: 32px;
    line-height: 0.5em;
  }

  #top #wrap_all #header #av-burger-menu-ul>li.av-active-burger-items {
    opacity: 1;
    top: 0;
    left: 0;
    padding: 0.2em 0;
  }
}

View post on imgur.com

Best regards,
Ismael

Hey Scanmark,

Thank you for the inquiry.

You can use this css code to manually adjust the style of the menu items on mobile view:

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

  /* Add your Mobile Styles here */
  .html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    line-height: 1.3em;
    height: auto;
    padding: 15px 50px;
    display: block;
    text-align: left;
    text-decoration: none;
    font-size: 16px;
  }
}

Best regards,
Ismael

Hey es.design.ma,

Thank you for the inquiry.

You can use this css code to adjust the size of the slider arrows:

#top .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    top: 50%;
    margin: -30px 15px 0;
}

#top .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
    margin-top: 0;
    height: 0.5em;
    width: 0.5em;
}

Best regards,
Ismael

Hi,

Thank you for the info.

Instead of using the icon shortcode, we replaced it with the search icon html.

<span class="av_font_icon av-m9s1gr1e-6ed42716956a76916230d7da2b2f0695 avia_animate_when_visible av-icon-style- avia-icon-pos-left avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate avia_start_animation avia_start_delayed_animation"><span class="av-icon-char" data-av_icon="" data-av_iconfont="entypo-fontello" aria-hidden="true"></span></span>

We also added this css code to adjust the position and size of the icon in the menu.

.menu-item .av_font_icon {
    float: none;
    margin-right: 0;
    font-size: 16px;
}

View post on imgur.com

Best regards,
Ismael

Hey schweg33,

Thank you for the inquiry.

In the Navigation Label field of the search menu item, you can replace the text with the icon shortcode or an icon image.

[av_font_icon icon='search' font='svg_entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m9qks9nw' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Best regards,
Ismael

Hi,

Thank you for the update.

Try to add this css code to further decrease the font size of the elements in the top bar and adjust its height.

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

  /* Add your Mobile Styles here */
  #top #header_meta a,
  #top #header_meta li,
  #top #header_meta .phone-info {
    font-size: 13px;
  }

  #top #header_meta .phone-info {
    padding: 0;
    margin: 0;
  }

  #top #header_meta .sub_menu {
    line-height: 16px;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Yes, that should be possible. Please include this css code:

#top .phone-info .avia-button .avia_iconbox_title {
    font-size: 12px;
}

Best regards,
Ismael

Hey wesdorman,

Thank you for the inquiry.

There might be a slight difference between the desktop and mobile views due to their aspect ratios, especially with the background image. For the font size, make sure to define a specific size for smaller screens. We tried logging into the site, but it’s asking for .htaccess authentication. Please provide the login info in the private field.

Best regards,
Ismael

Hey Akhurst,
To increse the font sizes for the price, sku, & categories, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.single-product .price span {
	font-size: 30px;
}
#top.single-product .main_color .product_meta span {
	font-size: 30px;
}

adjust the font size to suit.
To remove the related products, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function remove_woo_relate_products(){
    remove_action( 'woocommerce_after_single_product_summary', 'avia_woocommerce_output_related_products', 20);
}
add_action('init', 'remove_woo_relate_products', 10);

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

Best regards,
Mike