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

Hi,
I added this css:

.category .title_container h1 a {
font-size: 300%!important;
line-height: 55px;
font-family: "sacramento", cursive;
font-weight: 400;
}

and this code to your to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($){
  $('#top.category .title_container h1.main-title.entry-title  a').contents().filter(function() {
    return this.nodeType == 3
  }).each(function(){
    this.textContent = this.textContent.replace('Archive for category:','');
    this.textContent = this.textContent.replace('Tag Archive for:','');
    this.textContent = this.textContent.replace('Archive for:','');
  });
  })(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );	  

the result now:

Please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the update.

You can use this css code to adjust the style of the pagination:

#top .pagination .current, #top .pagination a, #top .fullsize .template-blog .pagination a {
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin-right: 6px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
    font-size: 18px;
}

#top .main_color .pagination a {
    background-color: #f2f1ef;
    color: #000000;
}

#top .main_color .pagination .current {
    background-color: #d5d5d5;
}

Best regards,
Ismael

Hi,
I disabled your Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Title and Breadcrumbs ▸ Display only title and added this to your code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 50, 1);
function avf_header_setting_filter_mod($header_settings) {
    if (is_tax() || is_archive()) {
        $header_settings['header_title_bar'] = "title_bar";
    }
    return $header_settings;
}

to only show the title on your category pages.
and I added this css:

.category .container_wrap_first {
	border: none;
}
.category .title_container {
	text-align: center;
	padding-top: 50px;
	background-color: #f2f0eb !important;
}
.category .title_container h1 a {
	font-weight: 600 !important;
	line-height: 1.3em;
	font-size: 30px;
}

so compared to one of you posts:

your category title looks like this:

But note that they are both H1, I don’t see H2 like you asked.

Best regards,
Mike