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

#10035590
Support
Keymaster

Hello Alexander,

You are right, the Revolution Slider has a good scale control for the background images. But with some custom code we can have the same effect. For example a section with the HTML below:

<section class="custom-section-style-1 section border-0 m-0" style="background-image: url(img/slides/slide-bg-performance.jpg); background-size: cover; background-position: center;">...........</section>

* Note I added a custom class custom-section-style-1.

By adding the custom CSS code below at (css/custom.css) you can have the same scale of rev slider on mobile devices:

/* The section height for tablet and desktop screens */
.custom-section-style-1 {
	height: 600px;
}

/* The section height for mobile devices */
@media(max-width: 767px) {
	.custom-section-style-1 {
		height: 40vw;
	}
}

* Note the height: 40vw;, that uses the vw unit.

Regarding the size of text inside it, the template comes with responsive text size classes so you can have different text size for each screen size. For example:

<p class="text-5 text-sm-6 text-md-7 text-lg-8 text-xl-9"></p>

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.


If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads