Reply To: Rev-slider not responsive on phone

[Support]

Hello,

Here’s the HTML code you need to make the texts responsive on mobile:

<li data-transition="fade" class="slide-overlay slide-overlay-level-8">
	<img src="img/slides/slide-corporate-5-1.jpg"  
		alt=""
		data-bgposition="center center" 
		data-bgfit="cover" 
		data-bgrepeat="no-repeat" 
		class="rev-slidebg">

	<div class="tp-caption"
		data-x="center" data-hoffset="['-115','-115','-115','-185']"
		data-y="center" data-voffset="['-110','-110','-110','-135']"
		data-start="1000"
		data-transform_in="x:[-300%];opacity:0;s:500;"
		data-transform_idle="opacity:0.2;s:500;"></div>

	<div class="tp-caption text-color-light font-weight-normal"
		data-x="center"
		data-y="center" data-voffset="['-110','-110','-110','-165']"
		data-start="700"
		data-fontsize="['22','22','22','40']"
		data-lineheight="['25','25','25','45']"
		data-transform_in="y:[-50%];opacity:0;s:500;">Välkommen till</div>

	<div class="tp-caption"
		data-x="center" data-hoffset="['115','115','115','185']"
		data-y="center" data-voffset="['-110','-110','-110','-135']"
		data-start="1000"
		data-transform_in="x:[300%];opacity:0;s:500;"
		data-transform_idle="opacity:0.2;s:500;"></div>

	<div class="tp-caption font-weight-extra-bold text-color-light negative-ls-2"
		data-frames='[{"delay":1000,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
		data-x="center"
		data-y="center" data-voffset="['-60','-60','-60','-85']"
		data-fontsize="['50','50','50','90']"
		data-lineheight="['55','55','55','95']">Valuewebs hemsida!</div>

	
	
	
	<div class="tp-caption font-weight-light text-center"
		data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":2000,"split":"chars","splitdelay":0.05,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
		data-x="center"
		data-y="center" data-voffset="['-10','-10','-10','0']"
		data-fontsize="['18','18','18','50']"
		data-lineheight="['29','29','29','55']"
		style="color: #b5b5b5;">Denna sida <strong>testar</strong> funktionalitet.</div>
	
	
	

	<a class="tp-caption btn btn-light-2 btn-outline font-weight-semibold"
		data-frames='[{"delay":2500,"speed":2000,"frame":"0","from":"opacity:0;y:50%;","to":"o:1;y:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
		data-hash
		data-hash-offset="85"
		href="/blog.html"
		data-x="center" data-hoffset="0"
		data-y="center" data-voffset="['70','70','70','145']"
		data-whitespace="nowrap"	
		data-fontsize="['15','15','15','33']"	
		data-paddingtop="['15','15','15','40']"
		data-paddingright="['45','45','45','110']"
		data-paddingbottom="['15','15','15','40']"				 
		data-paddingleft="['45','45','45','110']">Se bloggen</a>
	
</li>

Regarding the background image unfortunately there’s no 100% effective way. You can try changing the height of slider on mobile, for it change the value of gridheight to:

<div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 1170, 'gridheight': [700,700,700,350], 'responsiveLevels': ........................................

* The last value represents the mobile screen height (350).

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

---