How do I change the width of the image banner to match the width of the image with the other sections on the page?
https://c956e5-0e.myshopify.com/
Password 987
Think my earlier question was not clear.
Here what I really would like to do. How do I change the width of the image banner to match the width of the other sections on the page? I want image banner NOT to be a full width but match the width of other sections on the page.
I would appreciate any support I get to resolve this issue.
Hey @VKF ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Thank you so much. Your solution worked like a charm. But there is an issue with this. It only works for the banner already there. But if I insert another banner image, I need to repeat your solution with a new banner id. Is there a way to fix this permanently in the section image banner so every time I add the image banner it should be in the same width?
Try adding this, with the same instructions
Unfortunately, I’m back to dealing with this issue again - though only this on a bigger screen than my MacBook Pro 13".
So the above solution solved the issue on my 13" laptop screen but when I try to view the website on a Window laptop, screen size 17.3" the image banners are not equal to the page width. They display as full width - stretched all the way to the left and right side of the screen.
Also, for testing purposes, I have tried different free themes but the issue remains the same.
Also, I have followed the latest suggested guidelines for the images size by Shopify but still it did not work.
I really would appreciate it if someone could guide me to correct this issue. Sure I’m doing something incorrect somewhere but it seems like I’m lost.
The Testing site is - https://c956e5-0e.myshopify.com
Password 987
Hey @VKF ,
I’m on a 27" monitor, and it works fine for me. Can you share a screenshot of what you’re seeing?
Thank you.
A new Testing site
https://2adc7a-2e.myshopify.com/
Password 987
screenshots
It’s only a problem for 17" screens, if you go higher or lower, you don’t have that problem anymore.
Replace the code with this
Thank you so much for your patience and continue helping me to resolve this issue.
The new code worked and solved the banner width issue on screen over 13”.
But unfortunately now there is a new issue. The code only works if I keep the “Show container on mobile” under the image banner option unchecked or off. When I checked that option the banner width immediately goes full width on screen from 13” and bigger.
My test site shows the issue comparing the two image banners - the first banner had the “Show container on mobile” unchecked and the second banner had the option checked.
https://2adc7a-2e.myshopify.com
Password - 987
Replace the code with this
1 Like