What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Image Banner for Mobile Desktop

Solved

How can I fit a banner image for mobile with centered text?

KindWordsCards
New Member
5 0 0

Hello I've searched for css coding online but no prevail. I would like to fit the banner image for mobile for the text image in the center to fit the entire screen?

 

Thanks

 

Screenshot 2023-11-05 at 9.55.36 PM.png

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10303 2044 2116

This is an accepted solution.

Hi @KindWordsCards 

Please update code to this 

@media (max-width: 767px){
.slideshow__media { height: 22rem !important; }
.slideshow__media img { object-fit: contain !important; }
.banner--mobile-bottom .slideshow__text.banner__box { display: none !important; }
}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
10303 2044 2116

Hi @KindWordsCards 

You store link please 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

KindWordsCards
New Member
5 0 0
Dan-From-Ryviu
Shopify Partner
10303 2044 2116

Hi @KindWordsCards 

Go to your Online store > Themes > Customize > select Slideshow section and then add those code in Custom CSS of that section 

@media (max-width: 767px){
.slideshow__media { height: fit-content !important; }
.slideshow__media img { object-fit: contain !important; }
.banner--mobile-bottom .slideshow__text.banner__box { display: none !important; }
}

Screenshot 2023-11-06 at 14.28.10.png

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

KindWordsCards
New Member
5 0 0

Looks like it removed the images when I did it. Its showing up that way on the preview and also when I actually use my phone to visit the site. 

 

Screenshot 2023-11-06 at 11.16.50 PM.png

Dan-From-Ryviu
Shopify Partner
10303 2044 2116

This is an accepted solution.

Hi @KindWordsCards 

Please update code to this 

@media (max-width: 767px){
.slideshow__media { height: 22rem !important; }
.slideshow__media img { object-fit: contain !important; }
.banner--mobile-bottom .slideshow__text.banner__box { display: none !important; }
}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

KindWordsCards
New Member
5 0 0

Thank you so much! It worked!

Dan-From-Ryviu
Shopify Partner
10303 2044 2116
Very nice to hear from you. Have a great weekend

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

KindWordsCards
New Member
5 0 0
You as well. Thanks again!