Hello, i’m trying to reduce the button padding on the image banner on my website when in mobile view. I’m using the dawn theme. Here’s the website link:
AI-generated summary
Goal: Reduce the mobile button size (padding/space) on a Shopify Dawn theme image banner.
Solution (height): Edit Online Store → Theme → Edit code → Assets → section-image-banner.css. Add a mobile-only CSS rule using a media query (max-width: 749px) to set .banner__content a.button { height: 42px; min-height: auto; } with adjustable pixel value.
Follow-up (width): Add/replace CSS within the same media query to control width via the button container: .banner__buttons { max-width: 220px; } The pixel value can be adjusted to achieve the desired width.
Outcome: The height and width adjustments worked, and the issue was resolved. Code snippets were central to the fix, and no further actions were requested.
A little bit smaller but yes. Thank you so much for helping.
Hi @yvad101 ,
You can follow the instruction below:
- Go to Online Store->Theme->Edit code
- Asset->/section-image-banner.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
.banner__content a.button {
height: 42px !important;
min-height: auto !important;
}
}
NOTE: You can change 42px to match your theme
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
I was able to adjust the height but not the width. Could you add a line of code that allows me to do that.
Thank you.
Hi @yvad101 ,
You can try replace below code:
@media (max-width: 749px) {
.banner__content a.button {
height: 42px !important;
min-height: auto !important;
}
.banner__buttons {
max-width: 220px !important;
}
}
Hope it can help you
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
That worked. Thank you so much.