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
1554 354 381

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
8532 1681 1692

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>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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
8532 1681 1692
Select adapt to image then I will check and provide code optimize for mobile

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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
1554 354 381

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


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 !