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 · Accepted solution]

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

[PageFly-Henry · Accepted solution]

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

[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%.)

[webwondersco]

@YukonGlory Hope you are doing well.

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

[YukonGlory]

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

[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 </body> tag

<style>
body .card--standard .card__media{
width:100%;
}
</style>

[BSS-TekLabs · Accepted solution]

- 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! That was the workable solution (as mentioned by Henry).