Home>Support>Vantage lazy-loaded slider causes ugly layout shifting

Vantage lazy-loaded slider causes ugly layout shifting

By Herman Schoenfeld, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I have a business website with a prominent slider on the home page.

It seems the slider is lazy-loaded after the main HTML, and as a result, causes ugly layout shifting downwards. It wouldn’t be so bad if it was quick, but first-time users load the slider 2 – 4 seconds after the main page.

Typically this is solved with a placeholder div that is used to prevent the ugly layout-shifting.

Is there a way to do this using Vantage Premium and/or metaslider pro?

Checkout www.sphere10.com to see issue

(clear your caches and refresh to reproduce).

URL: http://www.sphere10.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Herman

    We could try hotifixing with a static height like you suggested:

    /* Main Slider */

@media (min-width: 1130px) {
#main-slider {
height: 420px;
}
}

    Let me know if that helps.

  2. 9 years, 7 months ago Herman Schoenfeld

    Yes, that fixed it. Thank you very much.

    This is what I ended up using:

    /* Main Slider */

@media (min-width: 1130px) {
	#main-slider {
      		width: 100%;
		min-height: 420px;
	}
}
  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad that helped. Thanks for sharing your final snippet with everyone.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More