Fullscreen slider on mobile, images off center

[saudkh]

Is there anyway to re-center images for responsive/mobile view? or even choose different images all together? the result right now just makes the images look bad in mobile.

see example here: https://saud.land

any help would be appreciated.

[SeaTheme]

Hi,

Because your images are wide, the rule is filled in container, it will be cropped in portrait mode.
There is a solution to show whole image, but there will be blank area in screen.

please go to Appearance > Customize, paste the custom css code to “Additional CSS” box.

@media (max-width: 768px) and (orientation: portrait) {
.home .top-slider {height: 50vh;}
.home #wrap {background: #333;}
}

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[saudkh]

Is there a recommended size? I do not wish to use cropped images.

[SeaTheme]

There is not the perfect recommended size. Because there are so many screen sizes, it’s impossible for one size to fit perfectly on all screens.

If you do not wish to use cropped images.
please use the custom css(but but there will be blank area in screen).

@media (max-width: 768px) and (orientation: portrait) {
.top-slider .ux-background-img {background-size: contain;}
}

[Author]

Posts