Home Forums SEA WordPress Theme Slider mobile responsive settings

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #21643
    MrLatvia
    Participant
    Purchased
    Expired

    Hi, I’m wondering if it’s possible to adjust the slider layout for mobile.

    I currently have a full screen slider on my homepage – spanning full width and height. However, since the images are landscape orientation, when this slider is viewed on mobile the images are heavily cropped.

    I would like ideally if it was possible to allow the break point for mobile layout to switch the slider to a centred and full width (but not full height) layout. An example of this in action can be found here http://www.republique.studio/

    On the topic of the slider, using 100% height for mobile still creates scrolling as it doesn’t use the inner window height (of the browser window rather than the screen dimensions). Can this be changed?

    Many thanks

    #21644
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    I am not sure if understand your question.

    On the topic of the slider, using 100% height for mobile still creates scrolling as it doesn’t use the inner window height (of the browser window rather than the screen dimensions). Can this be changed?

    Did you mean to make the image center and text bottom? like republique.studio ?

    Please leave your webpage URL also, thanks

    Regards!
    SeaTheme – SeaTheme.netTwitterFacebook

    #21649
    MrLatvia
    Participant
    Purchased
    Expired

    Hi there,

    Thanks for the response. I think you’ve misunderstood, as theres two different questions here.

    I currently have a full screen slider on my homepage – spanning full width and height. However, since the images are landscape orientation, when this slider is viewed on mobile the images are heavily cropped.

    I would like ideally if it was possible to allow the break point for mobile layout to switch the slider to a centred and full width (but not full height) layout. An example of this in action can be found here http://www.republique.studio/

    So currently my site functions like this:

    Current site

    As you can see, when it scales to mobile size the image is cropped heavily.

    I want it to function like so:

    Target site

    As you cans see, once it hits the mobile break point the image is no longer full height and is simply full width (with padding).

    #21650
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    Thanks for your screenshots. It is helpful.

    Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

    @media (orientation: portrait) {
     .slide-item-wrap .grid-item-img { 
        object-fit: contain;
     }
    }

    Please leave your webpage URL if it doesn’t work, thanks

    Best

    #21675
    MrLatvia
    Participant
    Purchased
    Expired

    Thank you so much! That worked perfectly.

    My 2nd question was relating to pages viewed on mobile.

    On the topic of the slider, using 100% height for mobile still creates scrolling as it doesn’t use the inner window height (of the browser window rather than the screen dimensions). Can this be changed?

    When viewed on mobile, the elements extend out to the entire screen display size, rather than the inner window height of the browser (the visible area portion of the browser window). I’ve created another gif to illustrate this:

    mobile-viewport

    If the red portion is what is being filled up at the moment, I want all pages on mobile to fit the green portion.

    Many thanks again!

    #21685
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please add the custom CSS:

    body.iOS.home{
     position: fixed;
    }

    Please leave the issued page URL if it doesn’t’ work

    Best

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

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!