Decrease proportionally the picture on the slider (our main page)

[Fernando DAmico]

We have bought Arnold theme some time ago and modified it in our child theme.
You can see our site there: http://fernandodamico.com/.
We have one problem on mobile devices (iPhone 5,6,7). We want to image in the slider decreases in proportion to the width of the screen, so we can see on the mobile exactly the same picture like on computer or laptop.
But now the picture does not decrease proportionally, it is simply placed on the center of the screen and cut off from the left side and from the right side.

We set for the image the next css:
.ux-background-img {
background-repeat:no-repeat !important;
-webkit-background-size:cover !important;
-moz-background-size:cover !important;
-o-background-size:cover !important;
background-size:cover !important;
background-position:center !important;
}

but it didn`t solve our issue.
Hope you can help us. If you need a more accurate description please let us know.

Thank you.

[SeaTheme]

Hi,
Please remove your css for .ux-background-img, try to use the custom css:

@media (max-width: 767px) {
 .ux-background-img {
    background-size: contain !important;
 }
}

Cheers!
Bwsm – uiueux.com – Twitter – Facebook

[Fernando DAmico]

Thank you! I changed the code but I see black band above the slider (image). Can I remove it (only for mobile)? Please chow me the code.

[Fernando DAmico]

[SeaTheme]

Please update the custom css as:

@media (max-width: 767px) {
 .ux-background-img {
    background-size: contain !important;
    background-position: 50% 0;
 }
}

[Fernando DAmico]

Thank you!
Can we delete the black band at the bottom of the mobile screen?
Can we show the slider on full height with a proportional decrease?

[Fernando DAmico]

Please disregard my pervious message.
I really appreciate your support and have last question for you.
How can we set on mobile 50% height for slider and 50% height for navy blue band?
Please look at attached screenshot.

[SeaTheme]

Please disregard my pervious message.
I really appreciate your support and have last question for you.
How can we set on mobile 50% height for slider and 50% height for navy blue band?
Please look at attached screenshot.

Please update the css:

@media (max-width: 767px) and (orientation: portrait) { 
 .ux-background-img {
    background-size: auto 50% !important;
    background-position: 50% 0;
 }
}

Tips: the “orientation: portrait” is for portrait mode of mobile only.

[Author]

Posts