Banner optimization for mobile

[elyseen]

Hi, 

Could you please let me know how I can optimize the size of the banner on mobile, desktop and full screen. The banner looks stretched on mobile version and full screen. 

Thanks,

Wesbite: https://elyseen.com.au/

[dmwwebartisan]

@elyseen 

Please share your webshop password!

Thanks!

[elyseen]

pw: mailtu. 

Thanks!

[dmwwebartisan · Accepted solution]

@elyseen 

Try this code for mobile 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
.slideshow--center-cta .slideshow__button--active {
    -ms-transform: translate3d(0%, 0px,0) !important;
    -webkit-transform: translate3d(0%,0px,0) !important;
    transform: translate3d(0%,0px,0) !important;
}
.slideshow__button--active {
    --ms-transform: translate3d(0%, 0px,0) !important;
    -webkit-transform: translate3d(0%,0px,0) !important;
    transform: translate3d(0%,0px,0) !important;
}

.slideshow__image {object-fit: contain !important;}
.slideshow--adapt .slideshow {min-height: 62vw !important;}
}

Thanks!

[elyseen]

Thank you so much!

[dmwwebartisan]

@elyseen 

If helpful then please Like Solution 

[BrendaBeverley]

Hi there, I have been having the same issue where the banner on the desktop webpage display fine, whereas the mobile view is really zoomed in (attached photos). I am using the prestige theme, I  have tried using the codes suggested, however, I do not have theme.scss.liquid or timber.scss.liquid in the asset section of editing code, only theme.css.

Web URL: https://brendabeverley.com/

Could you please advise? 

Thank you

Web viewmobile view

[JJLin]

The Prestige theme allows you to upload mobile images, so there is no need to change codes. Just crop the image and upload it!

[BrendaBeverley]

@JJLin Thank you! 

[ryersl]

I am having the same issue with my site as well