Responsive Unslider

Post

Posted
Rating:
#6766 (In Topic #1753)
Avatar
Standard member
starfish is in the usergroup ‘Fan in action’

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!
Online now: No Back to the top

Post

Important!
Posted
Rating:
#6780
Avatar
Site director
admin is in the usergroup ‘Administrators’

Automated fix message

starfish said

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!
This issue has now been filed on the tracker as issue #4263, with a fix.
Important!

Post

Posted
Rating:
#6824
Avatar
Standard member
starfish is in the usergroup ‘Fan in action’
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!
Online now: No Back to the top

Post

Posted
Rating:
#6829
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
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)…

Code

/*{+START,IF,{$MOBILE}}*/
...
   * {
      white-space: normal !important;
      {$BETA_CSS_PROPERTY,word-wrap: break-word !important;}
   }
/*{+END}*/

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.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

Philip, mytracker

Forum statistics: Birthdays:
Back to Top