How do i remove the white border around the collection list?

minnie1999xx · ‎12-29-2024

Hi,

I am trying to remove the white border on the collection list on both mobile and desktop view.

I want the photos to be seamless with no space in- between and being full screen.

Bundler-Manuel · ‎12-29-2024

Hello there Minnie @minnie1999xx To remove the white border around the collection list, follow these steps-

1. Access your Shopify Admin.
2. Go to Online Store > Themes.
3. Locate the theme you are currently using and select Actions > Edit code.
4. In a CSS file: Go to Assets, find your CSS file, and add your styles, OR in base.css OR,
5. In theme.liquid: Go to Layout, open theme.liquid, and add your CSS inside a <style> tag in the <head> section.
.collection-list-wrapper .card-wrapper .card__inner{
border: none;
}

Let me know if this works for you!

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.

minnie1999xx · ‎01-05-2025

Could you say specifically where i put the code? In which CSS file of the code?

DaisyVo · ‎12-29-2024

Hi @minnie1999xx ,

Can you share with me your store URL so I can help further?

Look forward to your response.

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

DaisyVo · ‎12-30-2024

Hi @minnie1999xx ,

I haven't got your response regarding the store URL.

Can you share your store URL so that we can assist further?

Look forward to your response.

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

LitExtension · ‎12-29-2024

You will need to modify the CSS of your Shopify theme:

Log in to your Shopify admin panel.
Go to Online Store > Themes.
Find your current theme and click on Actions > Edit Code.
Add this at the bottom of the file:

.collection-list, .collection-item {
margin: 0; padding: 0; border: none;
}

.collection-item img {
display: block;
width: 100vw; height: 100vh;
object-fit: cover;
}

Save the changes, then test on desktop and mobile.

Good luck!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

minnie1999xx · ‎01-05-2025

Hi, where on the code exactly do I insert?

WizzCommerce_Co · ‎12-29-2024

Hi @minnie1999xx , thank you for posting here!

You can follow my instructions below:

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

2. FIND theme.liquid: Go to Layout, open theme. liquid, and add CSS code inside a <style> tag in the <head> section.

.collection-list-wrapper .card-wrapper .card__inner{
border: none;
}

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

✨ Skyrocket BFCM with Wizz's apps: BOGO+ Buy X Get Y Free Gift
| Wizz Flash Sale & Price Edit | Snap B2B Wholesale Pricing | Snap Product Page Coupon | Snap Presale & Backorder | SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!

Dan-From-Ryviu · ‎12-29-2024

Hi @minnie1999xx

Could you share the link to your store so I can check?

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LizHoang · ‎12-29-2024

Hi @minnie1999xx, thanks for reaching out.

To assist you further, could you kindly share your store URL and the Theme you're using?

Thanks for your cooperation in this matter.

Liz

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

Mahfz_ShopiDevs · ‎12-29-2024

Its not a border.. it's casing because of the gapping by default. you can change it via custom css

Found it helpful? Please like and mark the solution that helped you.
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

minnie1999xx · ‎01-05-2025

Do you know the custom CSS to do this?

How do i remove the white border around the collection list?

How do i remove the white border around the collection list?

Community Blog Articles