Hi,

Thank you for the update.

The desktop score is now 98, and 80 on mobile. CLS is now resolved, but there’s still an LCP issue, which now points to the text element below the first gallery. It will probably help to further reduce the size of the background image (kuechen-schmidt_edelstahl_footer-bg.jpg), which is still 43KB and larger than necessary. Optimizing the slider images such as kuechen-schmidt_stellenanzeige_Technischer-Koordinator_2406.webp (88KB), kuechen-schmidt_service-check_kundenzufriedenheit-1-300×150.jpg (32KB), along with the others would also help.

Best regards,
Ismael

Hey Tilman,

Thank you for the inquiry.

The overlay option is not available for the Easy Slider element by default, but you can recreate the same effect using this css code.

.avia-slideshow .avia-slide-wrap:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
}

Let us know if you need more info.

Best regards,
Ismael

Hey tonyiatridis,

Thank you for the inquiry.

To adjust the color of the testimonial arrow, please add this css code:

.avia-testimonial-arrow-wrap .avia-arrow {
    background-color: #c8cedd !important;
    border-color: #c8cedd;
}

The text or span element in the testimonial content has inline styling, so you’ll need to remove it in order to assign a different text color.

<span style="color: #808080;">“When it comes to customer service, Brookwood Construction is top notch.&nbsp; I have a great level of comfort knowing Brookwood is behind the wheel, driving the project to completion.”</span>

Remove this part:

 style="color: #808080;"

Let us know the result.

Best regards,
Ismael

Hi,

Glad to know it’s working. Regarding the class selector .dmci, it’s probably not working because it’s being overridden by css rules with higher specificity. You may need to adjust it and use more specific selectors. Please remove the previous css code, then replace it with this:

#top #header .av-main-nav > .dmci a {
    letter-spacing: 0.0em;
}

This might help: https://css-tricks.com/specifics-on-css-specificity/

Best regards,
Ismael

Hey Sven,

Thank you for the inquiry.

The LCP is the background image used in the header container (kuechen-schmidt_edelstahl_footer-bg.jpg). It’s 2000px in width and 46Kb in size, which is a bit heavy. We recommend significantly reducing the image size, make sure it’s compressed and preload it using the plugin below.

— https://wordpress.org/plugins/preload-lcp-image/

CLS could also be improved by limiting the height of the revolution slider on smaller screens, making sure it doesn’t shift the page while the slider is loading. Please add this css code:

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

  /* Add your Mobile Styles here */
  #top #main #revolutionslider_1 {
    max-height: 220px;
    overflow: hidden;
  }
}

Best regards,
Ismael

Hey tonyiatridis,

Thanks for reaching out.

Please try this css code to adjust the font color of the sorting buttons:

#main .main_color #js_sort_items a, #top .main_color #js_sort_items a.active_sort {
    color: #ffffff;
}

#main .main_color #js_sort_items a:hover {
    color: #bbe2ff;
}

.main_color .text-sep {
    color: #e1e1e1;
}

Example:

View post on imgur.com

Best regards,
Ismael

Hi,

You can try this css code to adjust the top spacing of any text block element next to a code block.

.avia_codeblock_section + .av_textblock_section {
    padding-top: 50px;
}

Best regards,
Ismael

Hey navindesigns,

Thank you for the inquiry.

1.) You can adjust the Min. Mobile Font Size in the Style > Text & Typography panel, as shown in the screenshot below. You can apply a custom css class in the Attributes tab and control the font size using custom css.

View post on imgur.com

2.) Please try this css code to adjust the width and position of the SVG wave separator.

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

  /* Add your Mobile Styles here */
  .avia-section.av-wxcp-c90200cb46284bf3caa8c1c1fbba7cb6 .avia-divider-svg-top svg {
    height: 50px;
    width: calc(100% + 300px);
    left: 20%;
  }
}

Let us know the result.

Best regards,
Ismael

Hi,
The ID “#after_section_1” is now missing, perhaps you updated the page? So I added the ID “#add_50_px_pading” to the element:

and this css:

.page-id-4128 #add_50_px_pading  {
         padding-top: 50px;
}

Now it is working, please clear your browser cache and check.

Best regards,
Mike

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

.page-id-4128 #after_section_1 {
	 padding-top: 50px;
}

adjust to suit.

Best regards,
Mike

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

#top #main .avia-gallery.av-mb6m8z6a-b9f99ac9fd31fe48d94c453aabd891f1 .avia-gallery-thumb a {
    width: 50%;
}

Then disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression
and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files
Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike