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 illu…

Hi @Totalmann , You can follow these steps to make the banner image keep its proportion when the screen size changes Go to Shopify Admin > Online Store > Theme > Edit Code Open base.css, theme.css, styles.css, or custom.css and paste the code snippet below #Banner-template--18787820634393_…

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 o…

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] Here is how it looks in the…

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]

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!

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.

Make image banner responsive - Refresh theme

Store Design

BSSCommerce-B2B June 17, 2024, 4:37pm 3

Hi @Totalmann ,

Delete the following code segments

Here is result:

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

Topic		Replies	Views
Making image on Image Banner responsive with Sense template Store Design design , header , customizations , css , shopify-themes	4	72	August 26, 2023
Image banner too large on desktop only-Refresh theme Store Design css	7	143	June 17, 2024
adjusting image banner width Store Design design , customizations , collection-page , shopify-themes	10	174	December 17, 2024
Make header image responsive for phones Store Design design	6	71	May 15, 2025
Resize Image Banner (MOBILE) - Publisher Theme Store Design header , landing-page , css	3	46	October 16, 2023

Make image banner responsive - Refresh theme

Related topics