FROM CACHE - en_header
Promotion image

How can I adjust mobile image banner size to match PC version?

Solved

How can I adjust mobile image banner size to match PC version?

frks1
Tourist
27 0 2
‎11-23-2023 07:49 PM

I want to match the PC version and mobile size. The image banner appears smaller on mobile, how can I fix this?

Labels:
2,632 Views
0 Likes
Report
Accepted Solutions (2)
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎11-26-2023 11:18 PM

This is an accepted solution.

My mistake, please use this code 

 

<style>
@media (max-width: 767px){
#shopify-section-template--21467998388504__646552d2-a2ed-4dc6-9cee-9039000bb66a .banner { height: 15rem !important; }
}
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

2,541 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎01-01-2024 09:54 PM

This is an accepted solution.

Please update code to this and check again 

@media (max-width: 749px) {
.banner--adapt {
height: 14rem !important;
}
}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

2,274 Views
0 Likes
Report
Replies 23 (23)

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎11-23-2023 08:46 PM

Hi @frks1 

Could you drop your store link here to check?

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,610 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎11-23-2023 10:05 PM

Here it is!

https://artynkitsch.com/

2,598 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎11-23-2023 10:12 PM

Hi @frks1 

You can add this code below in your theme.liquid file before </head> tag in Online store > Themes > Edit code and check if reach your require

<style>
@media (max-width: 767px){
.slideshow__media banner__media.media { height: 40rem !important; }
}
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,595 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎11-26-2023 08:46 PM

Sorry for the late reply. However, the screen still appears small on mobile. Should I enter the code before </head>?

2,575 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎11-26-2023 09:55 PM

My code incorrect, please update it to this and add it before </head> or after <head> tag

<style>
@media (max-width: 767px){
.slideshow__media .banner__media.media { height: 40rem !important; }
}
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,567 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎11-26-2023 10:07 PM

I have entered the code, but there is no change in the mobile resolution. Is there another way?

2,566 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎11-26-2023 10:12 PM

Code updated 

<style>
@media (max-width: 767px){
.slideshow__slide .banner__media.media { height: 40rem !important; }
}
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,558 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎11-26-2023 11:14 PM

The code is not being applied correctly😭

From the code, it looks like it's for a slide banner, but what I'm looking for is the mobile size for an 'image banner' template, similar to the photo.

2,545 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎11-26-2023 11:18 PM

This is an accepted solution.

My mistake, please use this code 

 

<style>
@media (max-width: 767px){
#shopify-section-template--21467998388504__646552d2-a2ed-4dc6-9cee-9039000bb66a .banner { height: 15rem !important; }
}
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,542 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎11-26-2023 11:47 PM

It has been resolved. Thank you so much!!!!

2,532 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎12-28-2023 08:17 PM

I would like to get help from Dan-From-Ryviu. I'm trying to replicate another site, but the image banner appears too small on mobile, although it's fine on desktop. Is there a way to fix this?

2,350 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎12-28-2023 09:05 PM

Please send me that site URL

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,345 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎12-28-2023 11:34 PM

https://00cf47-2.myshopify.com/ 

 

here it is.

2,337 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎01-01-2024 08:09 PM

Please help me😢

2,310 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎01-01-2024 08:42 PM

Please try to add this code to Custom CSS of that section 

@media (max-width: 759px) {
.slideshow__media {
height: 40rem !important;
}
}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,305 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎01-01-2024 09:13 PM

I tried entering it, but there was no change. What I want to change is the image banner template!

2,300 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎01-01-2024 09:18 PM

Please add this code to Custom CSS of that banner section 

.banner--adapt {
height: 15rem !important;
}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,298 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎01-01-2024 09:31 PM

Sorry, I can't see the banner section in the Custom CSS.

2,288 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎01-01-2024 09:32 PM

Custom CSS when you select image banner section

Screenshot 2024-01-02 at 09.31.59.png

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,286 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎01-01-2024 09:45 PM

친절한 설명 감사합니다! 그런데 사용해 보니 사진처럼 데스크톱과 모바일 모두에서 화면이 잘리는 현상이 발생합니다. 어떻게 해야 하나요?

2,280 Views
0 Likes
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎01-01-2024 09:54 PM

This is an accepted solution.

Please update code to this and check again 

@media (max-width: 749px) {
.banner--adapt {
height: 14rem !important;
}
}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,275 Views
0 Likes
Report
In response to Dan-From-Ryviu

frks1
Tourist
27 0 2
‎01-01-2024 10:01 PM

Thanks to you, it's been resolved! I'm so, so grateful!!

2,273 Views
1 Like
Report
In response to frks1

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎01-01-2024 10:01 PM

You are very welcome, @frks1 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,269 Views
0 Likes
Report

Community Blog Articles

shopp-e-1741972742895593780274096851.png
Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025
Shopify_0-1741780029041.png
New learning path from Shopify Academy: How to create a digital marketing s...

Unlock the potential of marketing on your business growth with Shopify Academy's late...

By Shopify Mar 12, 2025
CRO-Community-Promo.jpg
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...

Learn how to increase conversion rates in every stage of the customer journey by enroll...

By Shopify Mar 5, 2025
Terms of Service Privacy Policy