Hi,

But now there are 2 short black horizontal lines left and right. What are they? How to get rid of them?

That is the border of the color section inside the footer page. Please refer to this thread: https://kriesi.at/support/topic/new-bug/#post-1479123

Best regards,
Ismael

Hi,

Try to add this css code:

body #header_main .av-logo-container {
    position: absolute;
    top: 0;
}

There might be other css rules applied to the original language but not to the EN version.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Have you tried using 1/3 Column elements? To center align the items in the second row, you can apply a left margin to the first item/column in the second row.

#top .flex_column.av-akkm-b2445ebeda64d34ec76acb1a0564417e {
    margin-left: 16.5%;
}

View post on imgur.com

Best regards,
Ismael

Hi,

That is probably due to this css code:

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

We no longer see this issue when we checked the site live.

View post on imgur.com

If the issue persists on your end, you can include this code in the css media query:

.responsive #top #main .avia-product-slider-container .products .product {
    margin: 0 1% 1% 0;
    width: 49%;
}

Best regards,
Ismael

Hey dradoering,

Thank you for the inquiry.

Have you done any page speed optimization to the site? If you haven’t, please review the following articles:

— https://kriesi.at/support/topic/pagespeed-100100/
— https://gtmetrix.com/wordpress-optimization-guide.html

You can start by installing a cache plugin such as WP Super Cache or WP Rocket and compressing the images. The LCP should improve once you’ve completed the steps above.

Best regards,
Ismael

Hi,

We modified the code in the Quick CSS field:

@media only screen and (max-width: 768px) {
  #top .avia-slideshow.av-lu5z97j3-d1f957c8c38e449b8b56e5cb4753112f .avia-slideshow-slide img {
    min-height: 500px;
    object-fit: cover;
  }

  #top .av-m7nj2xd7-f8dc5edf704b129f594536c49dabd9b8.avia-slideshow li img,
  #top .av-m8474mmq-b8b082188475e1a03955aab66d3e8639 li img,
  #top .av-m7utj0fm-55a4085e08fb8dd95eeb6325426a31b7 li img
   {
    height: 300px;
    object-fit: cover;
    object-position: right;
  }
}

Result:

View post on imgur.com

We also disabled the Enfold > Performance > File Compression settings temporarily. You can enable it back when you’re done editing the site.

Best regards,
Ismael

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