Theme Background Color Blocking Collection List Images

[YukonGlory]

Hey all,

Can someone please help?

I’ve applied a black color to certain sections of my theme (including the collection list page), however for some reason the color started blocking all my collection list images - instead of allowing them to display properly. I don’t recall making serious code changes to cause that to happen.

I’d appreciate any guidance I can get.

https://yukonglory.com/collections

[PageFly-Henry]

Hi @YukonGlory

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

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

.card__media {

width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[webwondersco]

@YukonGlory Hope you are doing well.

It is something tricky. what last changes you have made in store?

[webwondersco]

@YukonGlory

Follow these Steps:

• Go to Online Store
• Edit Code
• Find theme.liquid file
• Add the following code in the bottom of the file above tag

[BSS-TekLabs]

• Here is the solution for you.

• Please follow these steps:

• Then find the base.css file.

• Then add the following code at the end of the file and press ‘Save’ to save it.

.card--standard .card__inner .card__media {
 width: 100% !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[YukonGlory]

Thanks Henry! That worked seamlessly.

(Instead of adding the code to base.css, I simply changed the .card__media string in my component-card.css to width: 100%.)

[YukonGlory]

That’s the thing! I don’t recall making a major change other changing my theme color.

[YukonGlory]

Thanks! That was the workable solution (as mentioned by Henry).