This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Vantage lazy-loaded slider causes ugly layout shifting

Resolved 3 replies premiumthemetheme-vantage
Herman Schoenfeld
11 years ago · Last reply by Andrew Misplon 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 11 years, 3 days ago

    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. Herman Schoenfeld 11 years, 3 days ago

    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. Andrew Misplon Staff 11 years, 2 days ago

    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.

Have a different question or issue?

Start New Thread