Removing padding on collection list Impact Theme

Store Design
, ,

Topic summary

A user seeks to remove padding from their collection list on Shopify’s Impact theme and adjust the grid layout to display 2x2 on mobile and 1x4 on desktop.

Initial Solution:

  • Another user provides CSS code to be added to the theme.liquid file’s head tag, which successfully removes the padding on desktop.
  • Instructions include navigating to Online Store → Theme → Edit Code.

Remaining Issues:

  • The theme lacks a built-in option for two-column mobile layout.
  • Side padding persists at the edges, preventing the collection list from being flush with the screen borders.

Current Status:

  • The original poster resolved the column layout issue independently.
  • A second CSS solution was provided for the side padding problem, but it did not work.
  • There’s conflicting feedback about whether the solution functions properly, leaving the side padding issue unresolved.
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello, I want to remove all the padding from the collection list and I want to be able to have it be 2X2 on mobile and 1X4 on desktop, any help would be greatly appreciated, here are the reference pictures of what i want it to look like. My website is https://lastplacemotorsports.com/

Screenshot 2024-04-11 at 4.47.25 PM.png
Screenshot 2024-04-11 at 4.47.25 PM.png2398×1178 686 KB

IMG_2457.PNG
IMG_2457.PNG1179×2556 752 KB

2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

Step 3: Go to the online store ->Theme ->Customize

Set up collection list like below

AnneLuo_0-1712884193275.png
AnneLuo_0-1712884193275.png319×576 21.3 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

3

Awesome so the padding is gone! it works great on desktop but weird enough i dont have the option for the two columns on this theme, is there any code that would fix that?

Screenshot 2024-04-11 at 7.27.03 PM.png
Screenshot 2024-04-11 at 7.27.03 PM.png600×1500 40.3 KB

4

i actually just fixed it, but would you happen to know how to get rid of the side padding, I want it to be flush with the edge, thank you so much!

5

Okay. Great！

Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag
6

That unfortunately did not do anything

7

But i have check your page. It works well.