I can't optimise Mobile/Desktop image layout for Taste theme

Solved

I can't optimise Mobile/Desktop image layout for Taste theme

Gifto
Tourist
4 0 0

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!

Accepted Solution (1)

theycallmemakka
Shopify Partner
1787 435 462

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:

makkaomakka_0-1700886635294.png

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
10939 2148 2286

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.

Gifto
Tourist
4 0 0

Thanks for the reply Dan, not worked for me yet.

Screenshot 2023-11-25 at 3.20.50 PM.png

 

Should I select 'adapt to first image' or 'medium'?

Dan-From-Ryviu
Shopify Partner
10939 2148 2286
Select adapt to image then I will check and provide code optimize for mobile

- 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.

Gifto
Tourist
4 0 0

thanks, it's now selected as "adapt to first image"

theycallmemakka
Shopify Partner
1787 435 462

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:

makkaomakka_0-1700886635294.png

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Gifto
Tourist
4 0 0

that works! thanks both @theycallmemakka and @Dan-From-Ryviu for your help and quick responses !