How to make the Main Unslider Mobile Responsive

HI,

Is there a way to make the Main Unslider mobile responsive?  The text on my slides do not adjust to a mobile device.

Thanks so much!

Automated fix message

enelson said

Thanks.

This issue has now been filed on the tracker as issue #4263, with a fix.

Thank you so much!!!

I had to set the height to "auto" to allow for all text.  This made the slides different heights.  I had to play with the text to make it acceptable on my laptop (the second slide is slightly longer than the other two).  Obviously, the slide heights are different on my phone. I also found that having more than one text color on a slide added "spans", which affected the height of the slide.

When viewing on my phone, the last one or two characters on the right are still chopped off.  This is definitely better than what I had before.  Before, setting the height to a number (rather than "auto") made the words wrap in the middle of a word.

Thanks again for your help!

Glad it helped .

Setting a height shouldn't be needed, as the default should essentially be 'auto', just not explicitly set. In fact, setting auto will confuse the BLOCK_MAIN_UNSLIDER.tpl template which assumes any non-blank width or height is a signal that the slider should not be responsive.

The color spans shouldn't be changing anything in terms of alignment/size within the slider, unless there are new CSS rules added to target spans. I ran a test and couldn't see any styles being added to them other than the explicit color assigned. Generally the purpose of spans is to do very specific targeting like this and nothing else.

I'm not sure why stuff is getting chopped off, but my guess is something isn't wrappable. Perhaps an image too large for your phone screen, or a word that is super long, or a table, and possibly that then stretches every other slide out as unslider tries to equalise everything to the smallest box that can contain it all.

The CSS does have this (global.css)…


It is pessimistic about forcing word-wrapping, in case there are scenarios on the site where things don't fit on a smaller screen.
You can remove it, or target it more specifically, as you feel is best.