Reply To: Revolution Slider caption vertical position at certain resolutions

[Support]

Hello,

Regarding “320 x 568, 360 x 640, 375 x 667, 414 x 736 phones”:
Try using responsive levels for the blue shape:

<div class="tp-caption bg-primary"
	data-x="right" data-hoffset="['-680','-680','-680','-1020']"
	data-y="bottom" data-voffset="['62','62','60','45']"
	data-start="1000"
	data-width="['1250','1250','1200','1700']"
	data-height="['105','105','105','150']"
	data-transform_in="x:[50%];skX:-35deg;opacity:0;s:1000;"
	data-transform_idle="skX:-35deg;"
	data-transform_out="skX:-35deg;opacity:0;s:1000;"></div>

* Note data-x="right" data-hoffset="['-680','-680','-680','-1020']". This will change the position of blue shape on mobile.

Regarding “With tablets the caption appears underneath another layer”:
Unfortunately the Revolution Slider don’t comes with responsive levels for browser height. On this case is needed custom code. Please follow the steps below:

1) First add this CSS code at (css/custom.css):

.custom-display-on-low, .custom-display-on-high {
	display: none !important;
}

@media(max-height: 800px) {
	.custom-display-on-low {
		display: block !important;
	}
}

@media(min-height: 801px) {
	.custom-display-on-high {
		display: block !important;
	}
}

2) Use this HTML for your slider:

<div class="slider-container light rev_slider_wrapper" style="height: 100%;">
	<div id="revolutionSlider" class="slider rev_slider manual" data-version="5.4.8">
		<ul>
			<li data-transition="fade">
				<img src="img/jsr/splash.jpg"  
					alt=""
					data-bgposition="center center" 
					data-bgfit="cover" 
					data-bgrepeat="no-repeat" 
					data-bgparallax="1" 
					class="rev-slidebg">

				<!-- DISPLAY ON RES ABOVE 800PX OF HEIGHT -->
				<div class="tp-caption bg-primary custom-display-on-high"
					data-x="right" data-hoffset="['-680','-680','-680','-1020']"
					data-y="bottom" data-voffset="['62','62','60','45']"
					data-start="1000"
					data-width="['1250','1250','1200','1700']"
					data-height="['105','105','105','150']"
					data-transform_in="x:[50%];skX:-35deg;opacity:0;s:1000;"
					data-transform_idle="skX:-35deg;"
					data-transform_out="skX:-35deg;opacity:0;s:1000;"></div>
				
				<div class="tp-caption top-label tp-caption-custom-stripe custom-display-on-high"
					data-x="right" data-hoffset="50"
					data-y="bottom" data-voffset="['100','100','97','97']"
					data-fontsize="['24','24','24','30']"
					data-lineheight="['30','30','30','50']"
					data-start="1000"
					data-transform_in="x:[100%];opacity:0;s:1000;">BIENVENUE CHEZ SERVICE-CONSEIL JSR</div>
				<!-- END OF DISPLAY ON RES ABOVE 800PX OF HEIGHT -->

				<!-- DISPLAY ON RES BELOW 800PX OF HEIGHT -->
				<div class="tp-caption bg-primary custom-display-on-low"
					data-x="right" data-hoffset="['-680','-680','-680','-1020']"
					data-y="center" data-voffset="['62','62','60','45']"
					data-start="1000"
					data-width="['1250','1250','1200','1700']"
					data-height="['105','105','105','150']"
					data-transform_in="x:[50%];skX:-35deg;opacity:0;s:1000;"
					data-transform_idle="skX:-35deg;"
					data-transform_out="skX:-35deg;opacity:0;s:1000;"></div>
				
				<div class="tp-caption top-label tp-caption-custom-stripe custom-display-on-low"
					data-x="right" data-hoffset="50"
					data-y="center" data-voffset="['100','100','97','97']"
					data-fontsize="['24','24','24','30']"
					data-lineheight="['30','30','30','50']"
					data-start="1000"
					data-transform_in="x:[100%];opacity:0;s:1000;">BIENVENUE CHEZ SERVICE-CONSEIL JSR</div>
				<!-- END OF DISPLAY ON RES BELOW 800PX OF HEIGHT -->
			</li>
		</ul>
	</div>
</div>

* Note I duplicated the layers of blue shape and text. One for resolutions above 800px of height, and the other of resolutions below 800px of height.
* This way you can change the position of blue shape and text in the screens size you are having issues.

We hope this helps and clarify your question!

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

---