Shopify themes, liquid, logos, and UX
I can't get my images to look good on both desktop and mobile.
I have two images loaded - one optimised for desktop and one optimised for mobile which are loaded but they seem to be linked.
If I select image size as 'adapt to first image' it looks great on desktop but it's cropped on mobile.
If I select image size as 'medium' it looks great on mobile but it's cut off on desktop.
Website is gifto.co.nz
any help os MASSIVELY appreciated!
Solved! Go to the solution
This is an accepted solution.
Hi @Gifto ,
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>
<style>
@media screen and (max-width: 749px){
#shopify-section-template--20776233140518__e4c51cc9-973b-4ec1-a77e-da8433299912 .banner__content:before {
padding-bottom: 80%!important;
}
}
</style>
Result:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Hi @Gifto
Please try to add this code to your theme.liquid file after <head> and check if it is suitable for your mobile now
<style>
@media screen and (max-width: 749px) {
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 30rem !important;
}
}
</style>
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thanks for the reply Dan, not worked for me yet.
Should I select 'adapt to first image' or 'medium'?
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
thanks, it's now selected as "adapt to first image"
This is an accepted solution.
Hi @Gifto ,
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>
<style>
@media screen and (max-width: 749px){
#shopify-section-template--20776233140518__e4c51cc9-973b-4ec1-a77e-da8433299912 .banner__content:before {
padding-bottom: 80%!important;
}
}
</style>
Result:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
that works! thanks both @theycallmemakka and @Dan-From-Ryviu for your help and quick responses !
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025