Shopify themes, liquid, logos, and UX
I was looking through the community, and inserted the following CSS:
@media screen and (min-width: 990px) {
.image-banner-section {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 5rem;
}
}
then my banner image became messed up. Here is screenshot and link to the website.
Hello, @mgeorgiev24
The above css is set the content area with a variable. If the variable is not defined then it makes issue. In your site did you remove the CSS? You can set
max-width: var(--page-width); as max-width: 100%; or what you like.
Let us inform it solved your issue. or need any other assistance
Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.
I removed the CSS, buth nothing happened.
Please open the page with customize area from theme editor, it will clear the cache , hope it will solve the issue. It may be cache issue.
Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.
It didn’t seem to work.
Any help would be much appreciated.
Hi, I'm ready to help you, but unfortunately, I can't understand what you need because your image is too big. If you can provide more details or clarify your request, I can assist you faster.
Best regards, Arif from ShopiDevs
Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.
So basically I was playing around with the CSS of my theme, and pasted the above code inside the section-image-banner.css. Then the image appeared as in the above screenshot. When I removed the CSS from the code, I was hoping that it would go back to normal (Blue lines on the right side and the top of the picture), but it didn't. I tried the above recommendations, however nothing worked.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025