Change the size of these buttons - FLEX THEME

Store Design
1

Does anyone know how I can change the size of these 2 buttons on the top of my website (first image - shop / subscribe) I want them to fit the text more like the other buttons on website do (second image)

Screenshot 2022-07-13 at 14.30.09.png
Screenshot 2022-07-13 at 14.30.09.png1170×831 175 KB

Screenshot 2022-07-13 at 14.32.44.png
Screenshot 2022-07-13 at 14.32.44.png818×274 15.4 KB

2

Hi!

Could you post the URL to your store and I’ll take a look for you :slightly_smiling_face:

1 Like
3

@WoodyDev yes sure! it’s: bitofbackground.com

Thanks

4

Awesome!

Add these to the bottom of your styles.css file:

.button--secondary, .action_button--secondary, a.button--secondary.button {
    max-width: 20% !important;
    margin: 0 auto !important;
}

.button--primary, a.button--primary.button {
    max-width: 20% !important;
    margin: 0 auto !important;
}
1 Like
5

Screenshot 2022-07-13 at 21.17.11.png
Screenshot 2022-07-13 at 21.17.11.png1262×848 193 KB

[email removed]

@WoodyDev I’ve added the code but the spacing is weird now

6

Please add below css code in bottom of assets/styles.css file

.image-with-text-overlay__buttons {
justify-content: center;
}
.image-with-text-overlay__buttons .button {
flex: none;
margin: 0 5px !important;
}

Thank you.

7

No problem!

Replace the previous code with these:

.button--primary, a.button--primary.button {
    max-width: 20% !important;
    margin: 0 auto !important;
    margin-left: 100px !important;
}

.button--secondary, .action_button--secondary, a.button--secondary.button {
    max-width: 20% !important;
    margin: 0 auto !important;
    margin-right: 0 !important;
}
1 Like
8

Screenshot 2022-07-14 at 11.53.57.png
Screenshot 2022-07-14 at 11.53.57.png1291×723 178 KB

Screenshot 2022-07-14 at 11.53.30.png
Screenshot 2022-07-14 at 11.53.30.png371×710 139 KB

This is how it displays now @WoodyDev

9

Try this:

@media only screen and (min-width: 750px){
.button--primary, a.button--primary.button {
    max-width: 20% !important;
    margin: 0 auto !important;
    margin-left: 100px !important;
}

.button--secondary, .action_button--secondary, a.button--secondary.button {
    max-width: 20% !important;
    margin: 0 auto !important;
    margin-right: 0 !important;
}
}

@media only screen and (max-width: 749px){
.button--primary, a.button--primary.button {
    max-width: 100% !important;
    margin: 0 auto !important;
    margin-left: 100px !important;
}

.button--secondary, .action_button--secondary, a.button--secondary.button {
    max-width: 100% !important;
    margin: 0 auto !important;
    margin-right: 0 !important;
}
}