Moving text in Slider

1 reply · opened May 13, 2016

TtwoskaMay 13, 2016

I would like to move the text that shows up on the slider. I inspect it in Chrome and see:

<div class="slider-caption slider-caption-center" style="transform: translateY(0px); opacity: 1.28331; top: 293.5px;">
<h2 data-caption-animate="fadeInUp" class="fadeInUp animated">Data Driven Health</h2>
<p data-caption-animate="fadeInUp" data-caption-delay="200" class="fadeInUp animated">Harnessing the Power of Analytics to Improve the Efficiency of Healthcare and Positively Impact Patient Lives</p>
</div>

I would like to change the top: 293.5px so the text is more towards the top of the page but I cn't find where it is. How do I do this?

Temp page: http://www.thomaswoska.com/_data_driven_health/index.html

Thanks again for a great template.

Tom

SSemicolon WebSTAFFMay 13, 2016

Hello,

You can simply add the style="margin-top:-100px;" attribute to the .slider-caption Element. You can change the -100px Value according to your requirements. This will definitely work fine.

If you would like to use this for Responsive Devices too, then we would suggest you to use the Responsive Classes for this Purpose. Follow the Steps below:

  1. Add a Custom Class .custom-caption-margin to the .slider-caption Element.

  2. Now, add the following CSS Code using which you can control the Margin on different devices sizes:

.device-lg .custom-caption-margin { margin-top: -100px; }

.device-md .custom-caption-margin { margin-top: -80px; }

.device-sm .custom-caption-margin { margin-top: -60px; }

.device-xs .custom-caption-margin { margin-top: -40px; }

.device-xxs .custom-caption-margin { margin-top: -20px; }

This will Definitely work fine. The Responsive Classes are as follows:

.device-lg – Class for Large Devices >=1200px

.device-md – Class for Medium Devices >=992px to 1199px

.device-sm – Class for Tablets

.device-xs – Class for Landscape Mobiles or Phablets.

.device-xxs – Class for Portrait Mobiles

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard