Happening now | Office Hours: Customizing Your Theme With Shopify Partner @tim | Ask your questions now!

Re: Accidentally messed up one of the CSS in my web page

Accidentally messed up one of the CSS in my web page

mgeorgiev24
Tourist
8 0 1

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.Screenshot 2024-05-14 at 23.07.42.png

www.peak-point-store.com

Replies 7 (7)

Arif_Shopidevs
Shopify Partner
521 44 93

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.

mgeorgiev24
Tourist
8 0 1

I removed the CSS, buth nothing happened.

Arif_Shopidevs
Shopify Partner
521 44 93

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.

mgeorgiev24
Tourist
8 0 1

It didn’t seem to work.

mgeorgiev24
Tourist
8 0 1

Any help would be much appreciated.

Arif_Shopidevs
Shopify Partner
521 44 93

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.

mgeorgiev24
Tourist
8 0 1

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.