Forum Replies Created

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 5, 2025 at 9:45 am in reply to: CLS issue color section #1487594
    Rastoffarai

    Hi Ismael,

    Thank you for your quick reply.

    I did select the the images to preload via the LCP image plugin.

    In your first reply you wrote me: photovoltaik-anlage-fockenbrock-elektrotechnik-2560×1707-01.jpg. is the problem.
    home_background-keil.svg is a ovelay image! I can only preload one Image with LCP plugin.
    The filesize can´t be the Problem, i have tried way bigger on a page without my overlay and it is not causing LCP.
    With a tiny 20kb it is the same Problem.

    Can you please have a closer look either on my page oder in my CSS what might cause the problem other then image size or where I messed up with the height?

    Thank you for your help
    Christopher

    August 5, 2025 at 12:21 am in reply to: CLS issue color section #1487576
    Rastoffarai

    Hi Ismael,

    I am very happy with the Pagespeed Score since the CLS issue is solved!
    I am only curious where the LCP issue is coming from. Is it possible that is has something to do with the max height of my Backround image construct?
    The Preload LCP Image Plugin is installed and seems to be working fine.

    PageSpeeed Insights says here is the problem:

    <div id="av_section_7" class="avia-section av-1dccl-bef4804921c9cf0151d6be20e4d3ac5b main_color avia-sec…" data-section-bg-repeat="stretch" data-av_minimum_height_pc="80" data-av_min_height_opt="percent" style="">

    but this is the section under the header image.

    PageSpeed Insights LCP issue

    Any Idea what I am missing? I don´t think the image sizes are the cause. I build Enfold pages with larger backround images without getting LCP issues.

    Thanks you for your help and I have to say I love your Theme – created a few sites with it and will use it again and again !

    Best regards,
    Christopher

    August 2, 2025 at 3:23 pm in reply to: CLS issue color section #1487498
    Rastoffarai

    Hey Ismael

    could not wait :-)
    I had an idea and finally managed to fix my CLS issue.
    My problem was: A color section as backround with rows inside produces a CLS issue i could not get rit off.

    My solution: I used one color section as backround image with min-heigt and the svg overlay i had in a row is now a second color section positioned absolute over the first color section. Now I am only switching the overlay with media querys. This is CLS error free.

    The LCP issue persists, the preloading of my largest contet wasn´t helping.

     /* Color section container width and height 
CLS Fix  */

/* DESKTOP  */
.cjs-titel-keil-desktop-cls  {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 78px);
}
@media only screen and (min-width: 1025px) {
.cjs-titel-keil-ipadpro-cls {
    display: none;
}
}

/* IPADPRO  */
.cjs-titel-keil-ipadpro-cls  {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 78px);
}
@media only screen and (max-width: 1024px) {
.cjs-titel-keil-desktop-cls  {
  display: none;
}
}

    Best regards,
    Christopher

    August 1, 2025 at 11:51 am in reply to: CLS issue color section #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 4 posts - 1 through 4 (of 4 total)