How can I eliminate vertical padding on my webpage?

Store Design

Topic summary

A user seeks to remove horizontal padding (left and right margins) from their Shopify store pages, providing a screenshot for reference.

Initial Solution Provided:

  • Add CSS code to base.css, style.css, or theme.css targeting .collection.page-width and #main-collection-filters with padding-left: 0px and padding-right: 0px
  • This solution only affects collection pages

Expanded Request:
The user wants the padding removed from all pages, including header, footer, and all sections.

Additional Code Offered:

  • CSS targeting the header element to remove padding
  • Responder notes they only see homepage and product pages, making it difficult to provide comprehensive solutions

Future Plans:
User plans to later add standard Shopify pages (Terms & Conditions, Contact Us, FAQ, etc.) and may need further assistance.

Status: Ongoing discussion; complete solution pending visibility of all affected pages.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hi, sorry for the inconvenience!

Anyone knows how to remove that vertical padding the page has from left and right?
i will attach a photo!

davidvilaa_0-1692725681399.png
davidvilaa_0-1692725681399.png303Ă—947 63.6 KB

Webpage: https://centralmrkt.myshopify.com
Pass: 90210

Thanks!!!

1 Like
2

Hi @davidvilaa

Do you mean the padding on both sides? This maybe affect all pages. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.collection.page-width {
    padding-left: 0px;
    padding-right: 0px;
}
aside#main-collection-filters {
    padding-left: 0px;
    padding-right: 0px;
}
  • And Save.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Thanks, but it only affects to the collection page, could you provide me a code that affects to all the page? Including header and footer, all possible page sections

1 Like
4

Try this one for the heading.

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu {
    padding-left: 0px;
    padding-right: 0px;
}

Im not seeing another pages that you have only homapage and product page?

1 Like
5

Hi, thanks for the solution!
later i would like to add some normal shopify pages to add Terms & Conditions, Contact us, FAQ, etc.

Any solutions? :heart:

1 Like
6

Let me know then.. Because without seeing it, it would be hard.