How to Add Margins Around Buttons

At https://www.maxiwalkeruniform.com/ I have three buttons side by side in the full width image at the very top of the page. When the page is viewed on mobile, the buttons stack on top of one another, but they crash into each other. I have tried to add custom CSS to force a margin to the buttons, but it is not working. The CSS I added is


.button{

  margin: 20px !important;

}

Is my CSS wrong, or is this not possible and the buttons just have to crash on mobile devices?

Comments

  • Hello,

    Did you handle your issue?

    Because I have checked your website on mobile, and these buttons are not stacked, and there are gaps between them.

    Cheers

  • Those are linked images, not buttons. I created images that look like a button, as a workaround, since I can add margins to images. I know this is not a best practice or desired permanent solution, though, so if there is a way to use actual buttons as I should (instead of images) and add the spacing, please advise how I can do so. Thanks!

    .

  • If you put these buttons in separate wraps, then you will be able to put the padding for them.

    3) If you want your whole menu to be blue, please, use the following code:

    .mhb-view.mobile li{
       background-color: #2991d6!important;
    }
    

    Thanks

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.