Comulative Layout Shift / CLS

  • Resolved jusol

    (@jusol)


    2 months, 4 weeks ago

    Thank you for the good plugin. I have an issue with Cumulative Layout Shift (CLS) on mobile screens with Astra and integrating fibosearch as a widget displayed as an icon in the header: The search seems to use 100% width as default during loading, causing linebreaks on the right widget (shopping cart) until the page finished loading additional js/css. This is critisized by Google pagespeed/lighthouse and looks buggy during loading.
    It does not happen if I remove fibosearch and place a different widget on the left side, so I guess it is caused by fibosearch. I already tried to mess around with custom css but could not fix this. I disabled css/js handling in wp-optimize to make sure this is not the root cause. Maybe you have a hint how to fix this or can improve the plugin?

    Thx, Oliver

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Kris

    (@c0nst)

    Hi @jusol!

    Please try below CSS:

    @media(max-width: 992px) {
    	[data-section="sidebar-widgets-header-widget-1"] .dgwt-wcas-search-wrapp:not(.dgwt-wcas-layout-icon-flexible-loaded) {
    		min-width: 40px;
    		max-width: 40px;
    		height: 17px;
    	}
    }

    Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, take a look at this video.

    Regards,
    Kris

    Thread Starter jusol

    (@jusol)

    Hi @c0nst

    wow, thank you for your incredible support, your solution works perfectly.

    Best regards,
    Oliver

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.