Theme Background Color Blocking Collection List Images

Solved

Theme Background Color Blocking Collection List Images

YukonGlory
New Member
4 0 0

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

 

Screenshot 2024-06-19 100806.png

Screenshot 2024-06-19 101741.png

Accepted Solutions (2)

PageFly-Henry
Shopify Partner
1184 335 283

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

BSS-TekLabs
Shopify Expert
452 145 158

This is an accepted solution.

- Here is the solution for you.

- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1718809521368.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 7 (7)

PageFly-Henry
Shopify Partner
1184 335 283

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

YukonGlory
New Member
4 0 0

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
Shopify Partner
1113 165 162

@YukonGlory Hope you are doing well.

 

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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
YukonGlory
New Member
4 0 0

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

webwondersco
Shopify Partner
1113 165 162

@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>

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

BSS-TekLabs
Shopify Expert
452 145 158

This is an accepted solution.

- Here is the solution for you.

- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1718809521368.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
YukonGlory
New Member
4 0 0

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