Slider mobile responsive settings

[MrLatvia]

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

[SeaTheme]

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.net – Twitter – Facebook

[MrLatvia]

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:

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

I want it to function like so:

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).

[SeaTheme]

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

[MrLatvia]

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:

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!

[SeaTheme]

Hi,

Please add the custom CSS:

body.iOS.home{
 position: fixed;
}

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

Best

[Author]

Posts