Banner optimization for mobile

Solved
elyseen
Tourist
3 0 1

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/

 

0 Likes
dmwwebartisan
Shopify Partner
9136 2116 2884

@elyseen 

Please share your webshop password!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
elyseen
Tourist
3 0 1

pw: mailtu. 

 

Thanks!

0 Likes
dmwwebartisan
Shopify Partner
9136 2116 2884

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
elyseen
Tourist
3 0 1

Thank you so much!

dmwwebartisan
Shopify Partner
9136 2116 2884

@elyseen 

If helpful then please Like Solution 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
BrendaBeverley
New Member
4 0 0

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 viewWeb viewmobile viewmobile view

0 Likes
JJLin
New Member
1 0 0

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

iShot2021-07-29 17.49.36.png

iShot2021-07-29 17.49.54.png

 

0 Likes
BrendaBeverley
New Member
4 0 0

@JJLin Thank you! 

0 Likes
ryersl
Tourist
9 0 1

I am having the same issue with my site as well

0 Likes