How to removed padding around button and text on image banner

Technical Q&A
, , , ,

Topic summary

Seeking guidance to remove padding around the button label on an image banner in the Shopify Craft theme. The goal is to reduce/eliminate the space inside the button around the text.

Theme settings have already been adjusted, but the padding remains; the user asks for a method to achieve this change.

Padding refers to the internal spacing within the button element surrounding its text, typically controlled via CSS in Shopify themes.

A screenshot is provided and is central to understanding the visual layout and the exact padding issue.

No solutions, code, or settings adjustments have been proposed yet. No decisions or outcomes have been reached.

Status: Open/ongoing; the user is awaiting specific steps (likely CSS or theme customization) to remove the padding.

Summarized with AI on December 23. AI used: gpt-5.
1

Screenshot 2025-12-23 at 03.18.38
Screenshot 2025-12-23 at 03.18.382548×846 206 KB

I am designing my store using the craft theme and I am trying to remove the padding around the button label, does anyone knows how this could be done? I’ve tried changing the theme settings.

Thanks

2

Uncheck the “Container” setting under “Content”/“Layout”

Screenshot 2025-12-23 at 3.13.34 PM
Screenshot 2025-12-23 at 3.13.34 PM1144×485 38.2 KB

Screenshot 2025-12-23 at 3.13.42 PM
Screenshot 2025-12-23 at 3.13.42 PM1144×485 52.4 KB

2 Likes
3

Thank you so much!!!

4

Hey,

You can adjust the padding in your base.css file.

Add the following CSS:

.banner__content .button {
    padding: 10px 20px; /* Adjust these values as needed */
}

.banner__content .banner__heading,
.banner__content .banner__text {
    padding: 0; /* Removes padding from heading and text */
}

Best,
Daniel Smith

1 Like