Make image banner responsive - Refresh theme

Make image banner responsive - Refresh theme

Totalmann
Tourist
12 0 1

Hi,

 

How can I make the image banner (on home page) responsive and keep the same  proportions when the screen size changes on desktop? RIght now the image looks good on regular lapotop, but if displayed on a large screen the image stretches and changes the propositions. I have attached photos to illustrate. For refereance, this is the way I want my image banner to behave: https://kyari.co/

 

 

Laptop view (look fine)

Totalmann_0-1718622294419.png

 

Large wide screen: stretches weird an lossed part of the image

Totalmann_1-1718622336121.png

 

 

All help is appreciated 🙂 

 

 

Replies 6 (6)

BSS-TekLabs
Shopify Expert
389 122 131

Hi @Totalmann,

You can follow these steps to make the banner image keep its proportion when the screen size changes

1. Go to Shopify Admin > Online Store > Theme > Edit Code

2. Open base.css, theme.css, styles.css, or custom.css and paste the code snippet below

 

#Banner-template--18787820634393__e9e8a34c-54c4-43b5-ad03-20bfa0a78317 {
  min-height: 55vh !important;
}

 

This is the result on a very large screen:

BssTekLabs_0-1718638046385.png

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Totalmann
Tourist
12 0 1

Hi,

I pasted the code at the bottom of the base.css, but it made no difference 😕

I did some changes to the code a while back to be able to display different images on mobile and desktop. Maybe that has something do do with it?

Totalmann_0-1718655187524.png

 

Here is how it looks in the theme editor:

 

Totalmann_1-1718655257796.png

 

Thanks for the swift answer 😄 

 

BSS-TekLabs
Shopify Expert
389 122 131

Hi @Totalmann,

If pasting the code snippet into base.css didn't work, try pasting it into theme.css, styles.css, or custom.css. Reload your site a couple of times before testing the changes. And don't forget to save the file!

Hope this will help you!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Totalmann
Tourist
12 0 1

Hi,

Those files does not exist in my code, only the base.css.

I tried pasting the snippet into the "section-image-banner.css" but no resault there either. 

BSSCommerce-B2B
Shopify Expert
551 110 132

Hi @Totalmann ,

Delete the following code segments

BSSCommerceB2B_2-1718642058262.png

 

BSSCommerceB2B_3-1718642061696.png

 

BSSCommerceB2B_4-1718642065909.png

Here is result:

Animation.gif

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Totalmann
Tourist
12 0 1

Hi,

 

This worked but it made other sections extended and weird looking (see video). I only removed the small square sections you marked in the last 2 snippets. The first snippet I removed completely. Maybe I did something wrong here?

 

image banner.gif