jesstp
jesstp

Reputation: 47

Bootstrap - change @media or CSS?

I currently have a row with 2 . Each div has a button and is fine when in full view, but is not responsive as the buttons overlap each other.

Is it best to add a @media (max-width:767px) {.col-xs-2 {width: 50%;} in the bootstrap file or change in the CSS?

Upvotes: 1

Views: 165

Answers (2)

Daniel
Daniel

Reputation: 60

The default display for buttons in bootstrap is inline-block.

Try this on the button element:

display: block;
float: left; /*Optional!*/

Upvotes: 0

Sitecore Sam
Sitecore Sam

Reputation: 377

On columns you can add .col-md-6 for desktop medium devices and .col-xs-6 for mobile or extra small devices

Your column should look now as

.col-md-6 col-xs-6

Upvotes: 2

Related Questions