Slider Text Size at mobile device

[Marcel]

Hi Okler Team,

I want to change the text size from the second slide at http://preview.oklerthemes.com/tucson/2.1.0/index.html

So this:

									<div class="tp-caption text-bg text-bg-dark white top-label sfr"
										data-x="left" data-hoffset="130"
										data-y="center" data-voffset="-52"
										data-speed="800"
										data-start="500"
										data-easing="Back.easeInOut"
										data-endspeed="300"
										style="z-index: 1001; padding: 10px;">Everything you need.<br>
									</div>

									<div class="tp-caption text-bg white top-label sfr"
										data-x="left" data-hoffset="130"
										data-y="center" data-voffset="-10"
										data-speed="800"
										data-start="500"
										data-easing="Back.easeInOut"
										data-endspeed="300"
										style="z-index: 1001; padding: 10px;"><small>to build your next website.</small>
									</div>

I can change it in general, but I want to change it exactly for a mobile device.
Hopefully you can help here.

Thanks!

---

[Support2]

Hello,

You can do that using the responsive levels of revolution slider. But note that Tucson it’s with an outdated version of Revolution Slider, so in that case we need update the plugin. Please follow the steps below:

1) Download the two scripts on links below and replace on the folder “vendor/rs-plugin/js”:
– http://preview.oklerthemes.com/porto/6.2.1/vendor/rs-plugin/js/jquery.themepunch.tools.min.js
– http://preview.oklerthemes.com/porto/6.2.1/vendor/rs-plugin/js/jquery.themepunch.revolution.min.js

2) Change all HTML code of slider to:

<div class="slider-container">
	<div class="slider" id="revolutionSlider" data-version="5.4.7" data-plugin-revolution-slider data-plugin-options='{"startheight": 580, "responsiveLevels": [1200, 992, 768, 576]}'>
		<ul>
			<li data-transition="fade" data-slotamount="13" data-masterspeed="300">

				<img src="img/slides/slide-clean-bg-1.jpg" data-bgposition="left top" data-bgrepeat="no-repeat">

				<div class="tp-caption  text-bg white text-bg-dark sfr"
					data-x="left" data-hoffset="130"
					data-y="center" data-voffset="-52"
					data-start="500"
					data-transform_in="x:[-300%];opacity:0;s:500;"
			        data-fontsize="['15','15','20','30']" 
					style="z-index: 1001; padding: 10px;">Everything you need.</div>
					
				<div class="tp-caption text-bg white sfr"
					data-x="left" data-hoffset="130"
					data-y="center" data-voffset="-10"
					data-start="500"
				    data-transform_in="x:[-300%];opacity:0;s:500;"
				    data-fontsize="['12','12','20','30']" 
					style="z-index: 1001; padding: 10px;"><small>to build your next website.</small></div>

			</li>
			
		</ul>
	</div>
</div>

* Note the data-fontsize="[xx,xx,xx,xx]". This is the font size value for each resolution based on option "responsiveLevels": [1200, 992, 768, 576].

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

Kind Regards,

Rodrigo.

---

• This reply was modified 5 years, 9 months ago by Support2.

[Author]

Posts