Help Adjust Banner Size For Mobile

Help Adjust Banner Size For Mobile

LuizaSMC23
Excursionist
25 0 5

Hi, I have entered two images for desktop and mobile version on the frontpages's banner, for desktop it all worked well, but for mobile the image is cut and I don't know how to make all the image to be displayed ( there is two images for desktop and other two for mobile version, they have different sizes for each version)

 

In case someone can help me, here is the link: https://shoptarz.com/

 

Thanks in advance

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
10869 2143 2278

Hi @LuizaSMC23 

You can add 2 slide sections, then add code to hide mobile's section on desktop and vice versa

Add this code to Custom CSS of desktop's section

@media (max-width: 767px) {
.slide { display: none; }
}

Mobile's section 

@media (min-width: 768px) {
.slide { display: none; }
}

 

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

LuizaSMC23
Excursionist
25 0 5

Hello! I paste the code but the image is still cut, please see below on the first image how I see on live and on the second image how I see on shopify edit page, the image should be appearing in one piece, I think it would just adjust the height to automatic according to the height of the image but I don't how to code it

 

how it is on live - image is cut.png

How I see on shopify:

how it should be - how I see on shopify edit page.png

 

Dan-From-Ryviu
Shopify Partner
10869 2143 2278

Check if your slide has this option

 Screenshot_2.jpg

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

LuizaSMC23
Excursionist
25 0 5

Hello!

I don't have this option, only the option "disable full width", when this option is marked the slide appears with white spaces on both sides for desktop and mobile version for any slide size, just like this:

 

Captura de tela 2024-08-02 095337.png

 

Captura de tela 2024-08-02 095543.png