Genesis responsive slider on mobile

Community Forums Forums Design Tips and Tricks Genesis responsive slider on mobile

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  Dag-Erling 9 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #86312

    Dag-Erling
    Participant
    Post count: 49

    Hey

    I’m working on this page http://www.dagerlingjensen.no/sandbox3

    I’ve fixed most issues but I would like the the genesis slider to stretch to the top and to the bottom when I’m looking on a mobile device.

    How can I fully control this picture?

    http://www.dagerlingjensen.no/sandbox3
    #86338

    AC
    Blocked
    Post count: 7712

    You will need to add the slider CSS to the media queries/responsive area in your style sheet. And test the height and width of the slider on the device you are looking at. You’ll probably have to add the code and tweak it as you check back and forth on your devices.

    #86344

    Dag-Erling
    Participant
    Post count: 49

    Yes :) So far I’ve gotten. But I can’t figure out what part of the CSS that ends up controlling the image size.

    Edit: Could it be

    http://www.dagerlingjensen.no/media=“all”
    .flexslider .slides img {
    display: block;
    max-width: 100%;

    (In Norway, so it’s time to get some sleep. Will update tomorrow)

    • This reply was modified 9 months ago by  Dag-Erling.
    • This reply was modified 9 months ago by  Dag-Erling.
    #86345

    AC
    Blocked
    Post count: 7712

    What mobile device size are you viewing on? Can you provide a screenshot?

    #86349

    Dag-Erling
    Participant
    Post count: 49

    Yes of course

    It’s a HTC sensation. Old phone but good test case. So it’s a 540 x 960 pixels screen.

    http://www.dagerlingjensen.no/wp-content/uploads/2014/01/screenshoot.png

    • This reply was modified 9 months ago by  Dag-Erling.
    • This reply was modified 9 months ago by  Dag-Erling.
    #86369

    AC
    Blocked
    Post count: 7712

    Here’s the thing. Are you still working on this site? It’s not complete yet, right? If so, finish it first. Get all of your content and elements in place and then do the responsive part last for that device. This way you can tweak all of the elements at one time once they are all there.

    #86408

    Dag-Erling
    Participant
    Post count: 49

    I’m only concerned about the responsiveness on the front page. The others are working as they should. The slider is the only thing giving me trouble at the moment.

    #86413

    Dag-Erling
    Participant
    Post count: 49

    Since I couldn’t figure out how to make the picture has tall as I wanted I ended up just hiding the navigation buttons on the bottom when the screen goes below 800px.

    Any attempt to make the picture taller would push all the footers down. So the little gap would be there regardless.

    PS! And off-topic: The reason why I am focusing so much on this is because I have a “client from hell” situation. I had a pretty page with 6 posts displayed on the front as the agency-pro theme comes with. I got tons of positive response on it. Even on the second meeting where I showed off the page to the clients everyone loved it with the exception of one. The boss of course. So he wanted it to look more like an app.

    • This reply was modified 9 months ago by  Dag-Erling.
    • This reply was modified 9 months ago by  Dag-Erling.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.