This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Slider Text Responsiveness

  • Creator
    Topic
  • #8806
    mhp
    Participant

    Hi Jason… I’m working through a list of mobile responsiveness issues. One item that I find challenging is the text on the sliders. On my home page (http://timmudd.com/hfs), the text in the slider box is responsive, so on a mobile phone it ends up scrolling off the slider image. Any suggestions on how to overcome this? Thanks… mike

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
    Replies
  • #8815
    Jason Bobich
    Keymaster

    Hello Mike,

    It’s difficult to get a full slider to display on mobile with the same options configured to show on the desktop because the viewport is so much smaller, and so you have less area to work with.

    But it looks live you may have found the responsive options on the slider, since posting this? This will allow you to essentially either just display the first slide, or list out all of the slides on mobile.

    Another option is to feed some kind of alternate element entirely. When you’re in the Layout Builder, at the bottom of each element, there are options to show/hide that element on different devices. So, one approach could be to hide your main slider on mobile, and then insert another element that gets shown only on mobile just below it. This element could be a second slider that is more simple, or possibly some other HTML display that would be more simple and clean for the mobile user.

    #8818
    mhp
    Participant

    Thanks Jason. Yes, I have been playing with the responsive options. Nothing works exactly. And I have been thinking along your line of an alternate slider all together. However, interestingly, we just moved over to a pre-launch dev server and the slider mobile response is much different. The newer server is running WordPress 3.5.1 where as the old one was 3.5. It seems that under 3.5.1, the slider text gets set to “display: none” on mobile devices. Any experience with this? Is there a place were this is set and easily changed? The new home address is http://fm3mobile.com/harmonicfundservices/

    #8820
    Jason Bobich
    Keymaster

    In your custom.css file, you can write out any overriding custom styles you want targeting the mobile device by just wrapping them in proper @media queries the theme is using like this:

    /* Mobile */
    @media (max-width: 480px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }

    If you want to see what the theme is doing example and copy any of it to your custom.css to override, you can find all of this here in the theme: /assets/css/responsive.css

Viewing 3 replies - 1 through 3 (of 3 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.