Make image banner responsive - Refresh theme

Store Design
,
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
Totalmann_0-1718622294419.png1400×857 206 KB

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

Totalmann_1-1718622336121.png
Totalmann_1-1718622336121.png3829×1005 297 KB

All help is appreciated :slightly_smiling_face:

2

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
BssTekLabs_0-1718638046385.png2878×1618 434 KB

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!

3

Hi @Totalmann ,

Delete the following code segments

BSSCommerceB2B_2-1718642058262.png
BSSCommerceB2B_2-1718642058262.png950×1021 151 KB

BSSCommerceB2B_3-1718642061696.png
BSSCommerceB2B_3-1718642061696.png1063×1054 281 KB

BSSCommerceB2B_4-1718642065909.png
BSSCommerceB2B_4-1718642065909.png908×884 141 KB

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

4

Hi,

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

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
Totalmann_0-1718655187524.png975×872 37.9 KB

Here is how it looks in the theme editor:

Totalmann_1-1718655257796.png
Totalmann_1-1718655257796.png1542×785 207 KB

Thanks for the swift answer :grinning_face_with_smiling_eyes:

5

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

6

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!

7

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.