Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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/
Solved! Go to the solution
This is an accepted solution.
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!
Please share your webshop password!
Thanks!
This is an accepted solution.
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 Solution
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 view
mobile view🙂
The Prestige theme allows you to upload mobile images, so there is no need to change codes. Just crop the image and upload it!
I am having the same issue with my site as well
I thought this helped but it did some weird things to the top of the site so I deleted, can someone help me fix my banner so it won't minimise on mobile?
Website is- https://girlsthatprint.com/
User | RANK |
---|---|
120 | |
88 | |
74 | |
64 | |
47 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022