Testimonial slider tablet view

Site URL: https://www.poutacreative.fi/

Hi!

I have a testimonial slider on my front page and it works perfectly on mobile and on desktop. However on smaller screens (smaller laptop, tablet) it adds extra padding to the right side for the whole front page. It also affects to text which is not fully centered anymore. How could I fix that?

May you try this snippet in custom css, Settings->Design->Custom Css

section[data-section-id="5f6b8bd78eae7008fe79186e"] .content-wrapper {
  padding: 0 !important;
  padding-top: calc(30vmax / 5);
}

Unfortunately it didn't work. It gives "syntax error" for this line:  padding-top: calc(30vmax / 5);

6 hours ago, ilonapoutanen said:

Unfortunately it didn't work. It gives "syntax error" for this line:  padding-top: calc(30vmax / 5);

Sorry it's the limitation of custom css panel, we may want to turn it into custom code

Settings -> Advanced -> Code Injection -> Header

<style>
	section[data-section-id="5f6b8bd78eae7008fe79186e"] .content-wrapper {
      padding: 0 !important;
      padding-top: calc(30vmax / 5);
    }
</style>

Thanks, that fixed the problem. But now I have a new question: How can I still add padding to mobile view?

<style>
	section[data-section-id="5f6b8bd78eae7008fe79186e"] .content-wrapper {
      	padding: 0 !important;
      	padding-top: calc(30vmax / 5);
    }
	@media only screen and (max-width: 600px) {
		section[data-section-id="5f6b8bd78eae7008fe79186e"] .content-wrapper {
	      	padding: 20px !important;
	    }
	}	
</style>

Thanks for helping me, now it works! 🙂