Trying to align two buttons in mobile view

[Jack_Tauson_Sr]

I have the following JSFiddle where I’m trying to align the Save and Cancel buttons properly when it comes to the mobile view. So I’ve added the following style in the HTML section but it didn’t help and the Cancel button is still showing towards the somewhat right side in mobile view. How to fix this?

  @media (max-width: 500px) {
               
            .submitButton {
               width: 100%;
               margin-right:0;
            }

            .cancelButton { 
               width: 100%;

            }
            }

[DaveMaxwell]

Save button is getting the second entry, which sets the margin-left to 0. The cancel button gets the margin-left of 1em (about 13px).

[Jack_Tauson_Sr]

Thanks. Unfortunately, I can’t modify that CSS in the code so I was trying to add my own and see if I can fix that. Does adding the following in the style section look good to override that piece of information? I was hoping this should work but it didn’t it looks like after making following change in this JSFiddle :

@media screen and (max-width: 500px) {
               
            .submitButton {
               width: 100%;
               margin-right:0;
            }

            .cancelButton { 
               width: 100%;
               margin-left:1px;

            }
            }

[DaveMaxwell]

Well, part of it is you’re using the wrong selector. There are no submitButton or cancelButton classes - you’ve got them as ids, so the selectors should be #submitButton and #cancelButton

But you can do it much easier by overriding the button class itself.

A display block will automatically try to take up the entire space available, so the width isn’t needed. All you need to do is set the margins appropriately. I added the .5rem to allow for a little bit of space between the two buttons.

@media (max-width: 500px) {
            .button {
               margin:0 0 .5rem 0;
            }
}