How can I alter the CSS for all Dawn theme sections?

Store Design
1

Hi.

How can I change a particular aspect of all sections on all pages? Specifically, I’m looking to remove the padding on all sections on all pages of the Dawn theme.

I would like to put this in the theme’s code once, and have it apply everywhere. I see a lot of posts asking something similar to my question, like a particular section or page, but nothing enough that solves my particular problem.

Thank you.

2

To remove the padding on all sections on all pages of the Dawn theme, you can follow these steps:

  1. Access the theme code: Go to your Shopify admin, navigate to “Online Store” and click on “Themes.” Find your Dawn theme and click on the “Actions” button, then select “Edit code.”

  2. Locate the theme’s stylesheet: In the theme editor, look for the “Assets” folder and open the file named “theme.scss.liquid” or “theme.css” if you’re not using the Sass version.

  3. Add custom CSS: Scroll to the bottom of the stylesheet file and add the following CSS code:

.site-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

This CSS code targets the .site-section class, which is typically used to style the sections in the Dawn theme, and sets the top and bottom padding to 0.

3

Thank you. My understanding is that the Dawn them puts stuff in bass.css, so that is where I put your code. It doesn’t do anything. When inspecting the page in a browser the 5rem padding is still there.

I can get rid of the padding in the inspector by changing the value in:

@media screen and (min-width: 750px)
.page-width {
    padding: 0 5rem;
}

But I can’t seem to get it to work through the theme. I keep encountering this over and over.