How can I adjust the footer margins on my Debut theme?

Store Design
1

How can I edit the right and left margins on my Debut theme Footer. The margins do not adjust for the screen width. They look like their set to laptop size. My computer screen is 20 inches wide and there are approximately 4.5 inches of space to the right and left.

2

To edit the right and left margins of the footer in your Debut theme and make them adjust for the screen width, you’ll need to modify the theme’s CSS. Here’s a general approach to achieve this:

  1. Access the theme editor: Go to your Shopify admin dashboard and navigate to “Online Store” → “Themes”. Find the Debut theme and click on the “Actions” dropdown, then select “Edit code”.

  2. Locate the footer code: In the theme editor, look for the file that controls the footer. This is typically named theme.scss.liquid, styles.scss.liquid, or similar. Open it in the code editor.

  3. Find the footer styling code: Within the CSS file, search for the code that defines the styling for the footer. This could be a CSS selector targeting the footer element or a specific class or ID associated with the footer.

  4. Adjust the margins: Once you’ve located the footer styling code, you’ll need to adjust the margins to make them responsive to the screen width. Here’s an example of how you can do this:

.footer {
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
  padding-right: 20px;
  padding-left: 20px;
}
  • In this example, margin-right: auto; and margin-left: auto; center the footer horizontally on the page. max-width: 100%; ensures the footer expands to the full width of the screen. Adjust the padding-right and padding-left values as needed to provide additional spacing or reduce it.