Canvas slider caption on mobile

2 replies · opened Feb 8, 2020

SsupermanageFeb 8, 2020

Hello I am using Canvas slider but the captions are not responsive how can I make the captions all fit into any screen size?


Welcome to Canvas
New Delhi Indian Restaurant

Create just what you need for your Perfect Website. Choose from a wide range of Elements & simply put them on your own Canvas.

[Order Online](order-online)

If I use your demo the text is hidden under the next section. How to make all of this fit in regardless.

SSemicolon WebSTAFFFeb 9, 2020

Hello,

Simply add the following CSS Code to control the Font Size:

.device-xl .slider-caption h2 { font-size: 28px; }

.device-lg .slider-caption h2 { font-size: 26px; }

.device-md .slider-caption h2 { font-size: 24px; }

.device-sm .slider-caption h2 { font-size: 20px; }

.device-xs .slider-caption h2 { font-size: 18px; }

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

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

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

.device-md – Class for Tablets

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

.device-xs – Class for Portrait Mobiles

You can use the above code for other Elements as well.

You can also consider using the following code which will resize the Font Size according to the Viewport Width:

Hope this Helps!

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

SsupermanageFeb 9, 2020

Perfect thanks

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