Hey ballindigital,

Thank you for the inquiry.

You could apply a minimum height to the special heading element:

@media only screen and (max-width: 767px) {
    #top .av-special-heading {
        min-height: 61px;
    }
}

View post on imgur.com

Please note that the modification above will apply to every Special Heading element. You may need to apply a custom css class to the elements where you want this to be applied.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hey ballindigital,

Thank you for the inquiry.

It looks like you have already applied the adjustments. If you’d like to increase the image size further, you can add this css code:

#top.single .single-product-main-image {
    width: 50%;
    float: left;
    margin-right: 50px;
    overflow: hidden;
    padding-bottom: 50px;
}

#top.single .product div.images img {
    width: 100%;
    height: auto;
    max-height: unset;
    margin: 0 auto;
}

Best regards,
Ismael

Hi,

Thank you for the info.

In the style.css file, you have the following css rules that target specific widgets using #custom_html-2 or #custom_html-3. These rules don’t apply to the EN version because the widget there has a different ID, #custom_html-4.

body #header_main #custom_html-2 .col.btn a, body #header_main #custom_html-3 .col.btn a {
    display: block;
    background-image: linear-gradient(#d9c596, #b39b60);
    padding: 0 25px 0 25px;
    color: #050607;
    font-size: 14px;
    font-weight: 700;
    border-radius: 25px;
    max-height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    margin-top: 5px;
}

Please update the css to include the widgets in the EN version.

Best regards,
Ismael

Hey Jak73,

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

#top #header_main .av-main-nav > li > a {
  line-height: 0;
}

Best regards,
Rikard

Hi,

1. Try this CSS and change the values to your liking:

.avia_transform .av-active-tab-title .av-tab-arrow-container span {
  top: -5px;
}

.av-tab-arrow-container {
  height: 21px;
}

2. Try this CSS:

.CF-av-pill-tabs .av-active-tab-title {
  background: red;
}

3. Try setting the width to 100%:

.CF-av-pill-tabs .av-inner-tab-title {
  color: #FFFFFF;
  font-family: 'roboto';
  font-weight: 500;
  font-size: 36px !important;
  width: 80%;
  text-align: left;
  margin-left: 5% !important;
  margin-bottom: 0px !important;
  padding: 10px 0px 0px 0px !important;
}

Best regards,
Rikard

Hi,

Try to include this css rule inside the media query (max-width: 479px) to adjust the width of the items in the product slider:

.responsive #top #main .avia-product-slider-container .products .product {
    margin: 0 0 20px 0;
    width: 100%;
}

.responsive #top #main .av-19u5brg-c8bf1da9222c2acf3c8412eb09911916 .products .product {
    margin: 0 1% 1% 0;
     width: 49%;
}

This should maintain the layout of the items in the “Our Best Selling Products” section.

Best regards,
Ismael

Hi,

For the “Livraison en Afrique” page, please add this css code to adjust the size of the slider image on mobile view:

#top .av-m7utj0fm-55a4085e08fb8dd95eeb6325426a31b7 li img {
    height: 300px;
    object-fit: cover;
    object-position: right;
}

Best regards,
Ismael

Hi,
Sorry I don’t understand your request, Please note that we ask that each thread stays “on topic” and different threads are used for multiple questions, this helps future users find solutions easier and multiple Moderators assist you with a solution, thank you for understanding.
Please open a new thread and explain fully, perhaps a screenshot would help.

Best regards,
Mike

Hi,
1) for the search icon try this css in your quick css:

#top #header .av-main-nav > li#menu-item-search > a {
    background-color: unset;
}

2) don’t understand how burger menu is too long, perhaps a screenshot would help.
3) try this css:

.header_color .av_ajax_search_title {
    color: #fff;
}

Best regards,
Mike

Hi,
We don’t have experience with your plugin and it is unlikely that we can connect your plugin to the theme, but I do recall a Reading Time that was working with the masonry element. Please see this thread, perhaps you can modify it for your needs. I’m not sure, but we are limited with such customizations and third party plugins.

Best regards,
Mike

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

@media only screen and (max-width: 767px) {
    .responsive.html_header_top.html_logo_center #top .logo {
        left: 10%;
        position: relative;
        float: right;
    }
}

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

Best regards,
Mike

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

@media only screen and (max-width: 767px) { 
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg {
    opacity: 0;
}

.responsive #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block;
}
}

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,
It looks like you have this custom css in your child this preventing clicks on your topbar sub-menu:

#top #menu-item-1302 a {
    pointer-events: none;
}

I assume that you want to remove the click on the main item “Partenaires de séjours de vacances” but want the click on the sub-menu items, so remove your css and use this instead:

.menu-item-1302 {
	height: 30px;
}
#top #header_meta #menu-item-1302 > a {
   pointer-events: none;
}
#top #header_meta #menu-item-1302 .sub-menu a {
   pointer-events: auto;
}

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,
Glad to hear that you have this sorted out, please note that when you double minify with either two plugins or a plugin and the theme settings it will typically cause errors due to how minify works. Minify removes spaces and other characters from CSS, when it is double minified needed characters are sometimes removed causing errors. So the best approach is to minify only once with either the theme settings or a plugin.
TTFB is a server response time, your test above is for a mobile device which is throttled and not using true mobile 5G speed, typically most test mobile at 3G and 5G for desktop.

Best regards,
Mike

Hi,

Thanks for the update. If you have further questions which is not on the original topic, then please open a new thread and try to explain the problem that you are having a bit further. We’ll close this thread for now.

Best regards,
Rikard