Canvas Support

Vertical Alignment of Canvas Slider Captions

4 replies · opened Apr 22, 2016

MmofaheadApr 22, 2016

Hi,

Is there a way to adjust the vertical position of the canvas slider caption?

I see there are options "slider-caption-right", "slider-caption-left", and "slider-caption-center", but these are all centered vertically.

I'm looking to place the captions somewhat lower than vertical center.

Thanks for your help,
Dave

SSemicolon WebSTAFFApr 25, 2016

Hello,

This is Definitely Possible. 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. Let us know if we can help you with anything else or if you find any further issues.

MmofaheadApr 26, 2016

Hi,

Thanks for the reply. That solution does work for large screen sizes. However with a narrow screen width (mobile), the caption is pushed down so as to be mostly invisible. Is there a way to do this in a responsive way, or is there perhaps another workaround?

Thanks,
Dave

SSemicolon WebSTAFFApr 27, 2016

Hello,

This is Definitely Possible for the Responsive Devices too! And 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.

MmofaheadApr 28, 2016

Thanks, that works!

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