ATOM theme - block background color leaves weird corner pieces

[gigloinspriga]

Using the Atom theme, I want to change the background colors on the collapsable content. When I change a color it applies to all the collapsable blocks when I want each to be an individual color.

Then I went into the CSS of each block and it worked except for it’s leaving these “dead” rectangles in the corners of the blocks.

Any one know what is happening? Here is the page. PW is: shopifyhelp

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[gigloinspriga]

Thank you! Site is www.surrup.com

[BSSCommerce-HDL]

Hi @gigloinspriga

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Choose file base.css or theme.css

Step 3: Insert the below code at the bottom of the file → Save

.shopify-section.main-faqs-section .container-fluid {
   overflow: hidden;
   padding-right: 0 !important;
   padding-left: 0 !important;
}

Here is result:

Hope this can help you

Kind regards

[gigloinspriga]

Thank you so much, that worked!

Can I ask you another question, when you click on an image on my site it opens into the “zoom view” is there a way I can remove that so the images are not clickable?

[BSSCommerce-HDL]

Insert the below code to your file css:

.header__inline-menu .list-menu--inline {
  flex-wrap: nowrap !important;
}

Final Result:

Hope this can help you.

Kind regards

[BSSCommerce-HDL]

Hi @gigloinspriga

Sorry, I have some mistakes
You can insert the below code to your file css:

.slides .single-product-image {
  pointer-events: none;
}