Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 31, 2016 at 3:10 am #605597
    rdswestnet

    Greetings. Just made a website http://mobilebyfriday.com/ . Checked in on my Mac in 4 browsers, on my phone, and on screenfly. Looks great. However two different friends each checked site on their PC laptops and both reported that the caption heading displays OK, but everything else – the caption text and the buttons are below the bottom of the screen. Is there a way I can fix this without disturbing the beautiful balance of the slider element? It really takes the usefulness out of the element if I can’t display the buttons -which are the main menu for the one-page site. Can I write a media query for windows? Thanks, Rob

    March 31, 2016 at 4:57 am #605616
    Vinay

    Hi rdswestnet!

    There are two options

    1. Reduce the slider height to 100% of the page height so all content appears in the center or bottom of the slider.

    2. Add the below css to bring the title and the buttons on top of the screen.

    please feel free to use the padding top if you need to push the content down.

    .slideshow_align_caption {
    display: inline-block!important;    
    /*padding-top: 10vh;*/
}

    Best regards,
    Vinay

    March 31, 2016 at 7:49 pm #606156
    rdswestnet

    Sorry but I said the wrong thing. It’s not a fullscreen slider it’s a fullwidth slider. I do not see any setting for maximum height. Please advise where the setting s or maybe some css can accomplish the same thing. Thanks for the quick response.

    btw my images are 1500 x 1500 and the slider is set to extra large

    Thanks Again, Rob

    April 1, 2016 at 7:07 am #606516
    Ismael

    Hi!

    The height of the image is a bit too tall for the full width slider. Usually, sliders should be entirely visible above the fold. Why don’t you use the full screen slider instead? The height of the slider will automatically adapt to the height of the browser. Unfortunately, there’s no max height option in the full width easy slider.

    Regards,
    Ismael

    April 1, 2016 at 7:48 pm #606838
    rdswestnet

    Hey Guys

    Thanks for the quick reply. Sadly, I started with a full screen slider but you guys were unable to resolve an issue that I was having so I switched to the full width slider. My request for help was entitled “fullscreen slider resizing on phone” I’m guessing if I went back to a full screen slider I’d have the same issue again.

    I don’t really care if the image gets cut off a bit when someone maximizes the viewport on a wide-screen device. However the buttons which are the main nav for the site do need to be visible. Is there no way to more the text and buttons up a bit *only* when the viewport is maximised on a wide-screen device?

    Thanks Again for the help.

    Rob

    April 4, 2016 at 8:04 am #607431
    Ismael

    Hi!

    I see. You can move the caption container so it will always be visible above the fold:

    .slideshow_align_caption {
    vertical-align: top;
}

    If you want to manually adjust the top position, use this:

    .slideshow_align_caption {
    vertical-align: top;
    top: 10%;
}

    Adjust the value of the “top” property.

    Regards,
    Ismael

    April 5, 2016 at 8:26 pm #608508
    rdswestnet

    Hey Thanks all.

    I could not quite make it perfect at all screen sizes however by wrapping Ishmael’s code in an aspect-ratio media query and applying css only to really wide screens now it is perfect:

    @media screen and (min-aspect-ratio: 5/3) { .slideshow_align_caption {
    vertical-align: top;
    top: 35%;
    } }

    April 6, 2016 at 6:47 am #608696
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing the solution :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.