Reply To: Noticeable negative impact of Revolution Slider on Google PageSpeed Score

January 7, 2021 at 7:03 am #10035599
alex_2000
Participant

Hello Rodrigo,

Thank you for the code snippets.
I have tried them out and it seems to be working correctly for the screen widths:

  • Viewport 1200+ px (full sized normal screens)
  • Viewport reduced to width 1200px
  • Viewport reduced to width 991px

But in cases of smaller screen width a very odd not expected behavior is observed:

  • Viewport reduced to width 767px – the text seems to be scaled down correctly but the container with the text seems to be partially “shifted” down/over to the other completely different section below. So it “hangs over” both sections.
  • Viewport reduced to width 575px – similar problem like with 767px above but even worse, since in addition to incorrect shifting of the text to the other section, the text is not scaled / scaling is lost.

In order to fully and clearly demonstrate what happens I have made screenshots, see below:

Working full size
Working scaled down to 1200
Working scaled down to 991
NOT working correctly scaled down to 767
NOT working correctly scaled down to 575

Here is the code snippet of the section with the image and text effects, plus the section below that is visible in the screenshots (for completeness):

<div role="main" class="main">
	<section class="custom-section-style-1 section border-0 mt-0 mb-0 pb-0" style="background-image: url(img/femina/Homepage-Main-Image-2-Wide-Zoomed-x125-up.png); background-size: cover; background-position: center;">
		<div class="container pt-5 mt-5">
			<div class="row align-items-center justify-content-center pt-5 mt-5">
				<div class="col-lg-12">
					<h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInDown" data-appear-animation-duration="950"><em>- Individually -</em></h2>
					<h1 class="text-center text-color-light-custom-2 font-weight-bold text-sm-5 text-md-8 text-lg-9 text-xl-10 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="800" data-appear-animation-duration="950">Tailored Assistance</h1>
					<h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="1700" data-appear-animation-duration="950"><em>suiting your needs</em></h2>
				</div>
			</div>
		</div>
	</section>
	<section class="section section-tertiary mt-0">
		<div class="container">
			<div class="row">
				<div class="col">
					<h4 class="mb-3">Tertiary Section</h4>
					<p class="mb-0">Lorem ipsum dolor... <br>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc. Vivamus bibendum magna ex, et faucibus lacus venenatis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc. Vivamus bibendum magna ex, et faucibus lacus venenatis eget.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.</p>
				</div>
			</div>
		</div>
	</section>

Thank you in advance!

Best Regards,
Alexander