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 |
---|---|
126 | |
95 | |
78 | |
54 | |
46 |
Would 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, 2022Shipping can be one of the most vital parts to set up and manage your business. Understand...
By Ollie Dec 16, 2022