How can I reduce the button size? It’s currently taking up a little too much room. (Dawn 15.0)
Topic summary
Main issue: Reduce oversized buttons in a Shopify store using the Dawn 15.0 theme. The goal is to shrink button footprint on the homepage.
Initial guidance: Suggested that button size is influenced by the amount of text. Recommended either shortening the button text or adding a CSS rule in base.css targeting slideshow buttons (selector: .slideshow__text-wrapper .button) to reduce padding to 0 1rem (padding controls the inner space of the button).
Update: The targeted slideshow-specific CSS did not change the appearance. The requirement broadened to reducing the size of all homepage buttons.
Latest proposal: Apply a more general CSS rule in base.css using the .button selector with padding: 0 1rem !important; to affect all buttons. This uses !important to override existing styles.
Outcome/status: No confirmation of success yet. Discussion remains open; next step is to test the global .button padding rule and verify across homepage sections.
Hello @ape514
The size of the button is larger due to the text in it. if you reduce the text, the button size automatically reduced and fit in your theme.
another option is that you can apply below css at the end of your base.css file.
.slideshow__text-wrapper .button {
padding: 0 1rem !important;
}
Open base.css file. copy above mentioned code and paste it at the end of the file.
Don’t forget to save the file after making changes.
@parth_ghelani Nothing seems to have changed. Any other solutions? I want to change the size of all the buttons on the front page they’re taking up a little too much room.