Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 31, 2025 at 10:33 am #1487411
    Rastoffarai

    Hello Enfold Team,

    I have CLS issue on my first color section (on all of my main pages).
    I have managed to fix the issue, but when I realized that my design is not looking good on IpadPro, I have added a second color section with a media query only between 1024-1025Px. Since then the CLS issue is back and I can´t find a solution.
    Can you please have a look what I am doing wrong?

    Best regards,
    Christopher

    August 1, 2025 at 6:34 am #1487445
    Ismael

    Hey Rastoffarai,

    Thank you for the inquiry.

    This is the image causing the LCP issue: photovoltaik-anlage-fockenbrock-elektrotechnik-2560×1707-01.jpg.

    It is currently 2560×1707 pixels, which is quite large. Consider resizing it to half that size or smaller (1024x683px), and make sure all site images are properly compressed. You can use optimization plugins like ShortPixel or Imagify for this.

    After resizing and compressing the images, use the following plugin to preload the “photovoltaik-anlage-fockenbrock-elektrotechnik” image.

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

    Let us know if the LCP issue continues.

    Best regards,
    Ismael

    August 1, 2025 at 11:51 am #1487460
    Rastoffarai

    Hey Ismael

    Thank you very much for your reply.
    The LCP issue is gone, that was the next thing on my list :-)
    My main concern is the CLS issue on desktop. Managed to fix it with 100vh height (i think) but since I have added the media query to have a different color section for IpadPro I can´t get rid of the bad CLS score. The 100vh solution makes the dektop version higher then 100vh and I am running out of ideas.

    My CSS regarding this color sections:
 /* Color section container width and height  */

/* DESKTOP  */

.cjs-titel-keil-container .container {
  width: 100% !important;
  min-width: 100%;
  min-height: 80vh;
  padding: 0;
  margin-right: -1px;
  magin-top: -1px;   
}

@media only screen and (min-width: 1025px) {
.cjs-titel-keil-container-ipadpro {
  display:none !important;
}
}

/* IPADPRO  */

.cjs-titel-keil-container-ipadpro .container {
  width: 100% !important;
  min-width: 100%;
  padding: 0px;
  margin-right: -1px;
  magin-top: -1px;   
}

@media only screen and (max-width: 1024px) {
.cjs-titel-keil-container  {
  display:none !important;
}
}

    Thank you for your Help
    Best regards,
    Christopher

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.