Making the images and text in the slider mobile-responsive

Question

https://d2kpejp8x5bq63.cloudfront.net/

As you can see, at index.html I have a slider stylized to my liking with the help of your hard work / template. I have noticed, however, that when viewing the slider via mobile or a smaller screen the image and text do not respond dynamically. Is this something that can be mended? Is it possible to write out instructions for the browser to load a smaller image and font-size when viewed on a mobile screen? Is there an even better solution to this problem? It's been stumping me for a while and I'd like to resolve it.

Thanks!
-Van

SemiColonWeb · Accepted Answer

Hello,

We Really Apologize about the Inconveniences caused!

This is Definitely Possible. Please consider using the Responsive Heights Functionality for the Image:

data-height-lg – Height for Large Devices >=1200px

data-height-md – Height for Medium Devices >=992px to 1199px

data-height-sm – Height for Tablets

data-height-xs – Height for Landscape Mobiles or Phablets.

data-height-xxs – Height for Portrait Mobiles

Example:


![attachment](images/logos/neoLogoLarge.png)

This will surely work fine. Thanks for your Patience.

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

vanbenno · Answer

Thank you! This worked very well for the image, but I still wonder if it is possible to do something similar with the text on the sliders. Do I just use Data Height as a Style?

Semicolon Web · Answer

Hello, This is Definitely Possible too! Consider using the Responsive Classes. You can add the following CSS Code to control the Font Size: This will definitely work fine. Let us know if we can help you with anything else or if you find any issues.

vanbenno · Answer

Just putting that into my custom CSS folder will do all the work? I don't have to add additional classes to the index.html? That would be great! Unfortunately it seems like my IDE is either lagging or there is more to it that I'm not doing. aagh

Semicolon Web · Answer

Hello,

Yes! Simply adding the above code inside the css/custom.css File and linking this CSS File in your header as described in the Documentation > Start > Customization Section will work fine.

Hope this Helps! Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

vanbenno · Answer

I figured out why this wasn't working well for me. I had to make adjustments and add additional custom CSS
For Example: I also had to redefine the specific font-size of other text elements within the slider-captions. If You don't do this then the captions will not respond as well as they could, and only your h2 tags will actually resize.