Executive Pro Slider Text Too Big On Mobile

[thrivident]

I am working on http://thrivident.com and I'm happy with how it looks on a desktop PC or Mac. I was able to change the text size of the Genesis slider and CTA with a custom css.

My challenge is that the text does not appear responsive on a mobile device. I'd like to be able to have the text fit the with of whatever screen it is being viewed on.

The slider image and background exerpt appear fine. The text stays too large and goes off screen.

Thank you in advance for your help.

http://thrivident.com

[Tom]

Hi,

The slider's CSS does not provide for text responsiveness. It can't, really, because every theme has a different slider text layout and often a different reponsiveness profile. So themes with sliders contain some CSS to control text responsiveness, such as in Education Pro and Executive Pro. Some smaller screen media query eventually gets a "display: none" for the slider text (Executive does this at 1023px, Education Pro at 768px). The slider control itself offers "Hide Title & Content on Mobile Devices" as an option.

Just as you have customized the slider texts for full-width display, you must do the same through media queries for the smaller screen sizes.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[thrivident]

Tom,

Thank you very much for the response and the feedback. I really appreciate it. Would you have a link for a tutorial you would recommend on how to make size adjustments based on the media queries?

Much appreicated!

[Zendor]

Curious if you found a link Tom as I'm having the same problem on mobile devices - my site http://www.glyniswright.co.uk

Any help would be massively appreciated

[Tom]

Sliders have real limitations (and limited appeal) but are easy to setup - until you consider mobile, as you've found for these cases.

<soapbox>If the content is so important as to rank top, front and center on a site, a slider may not be the best option for presentation of that content - especially if the text content is presented secondary to the slider image(s).</soapbox> 😉

Some options:

(1) With Genesis Responsive Slider, at the problematic screen sizes, use CSS to make the excerpt 100% width and change the text and button sizes to fit (this could work with fractional opacity of the excerpt).

@thrivident - you're halfway there because you've only a single, fixed image, using the slider for convenience and image responsiveness.

@Zendor - this might be more problematic due to the way you've added a colour panel to the slider images instead of using a wider 'raw' image with text overlay only.

(2) A design change to use a responsive background image with text overlay that you can customize for screen size (without the constraints of the slider)

(3) Try a "pro" slider like Soliloquy (sale @ 30% off for the next two days) - check their text/responsiveness first, of course, to satisfy your requirements.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts