css - group buttons differently depending on the screen size

Question

I am trying to group two buttons together.

I have a design that works on big screens, with two buttons floating to the right on the same line. However when resizing, there is one button that will get onto the text :

The requirements are :

• the buttons are on the right of the text when the screen is big enough (works fine)
• the buttons get on top of each other (instead of next to each other like in the screenshot) when the screen gets smaller. They also should have the same width in this case.

Answer 1

Sure, you just need to use media queries in CSS.

In your media query you can define min-width or max-width. Min-width lets you say that at x screen width and larger, follow this set of styles. Max-width is at x screen width and smaller. Best practice is to use min-width and style your site for smaller screens first and then apply more complex styles on top of that with media queries. However if you just need it for one element, it's okay to work down:

@media screen and (max-width: 768px) {
    .button-container {
        float: none;
        display: block;
    }
    .button {
        width: 200px;
        display: block;
    }
}