Confused as to why media query doesn't work still

Hey all,

I’m working with react-bootstrap in a data vis project, and I’ve decided to use columns along with margin to add a little something extra to my Recipe box project

I’ve been able to do something like this


without too much trouble, but when I change the window size, obviously because I used margin, it goes to this

I initially tried to use a media querie to solve this

@media only screen and (max-width: 768px){
  .myWell {
    margin: 0;
  }
  .myWell2 {
    margin: 0;
  }
}

but it’s not seeming to work. Does anyone have any tips on how I can fix this issue? Maybe there’s a way I can achieve the first design without using margin at all?

Make sure you have a meta tag nested in your head tag of the html. The meta tag should set the initial screen scale like this:

And check out this for a working example:

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery_orientation

This really helped me with understanding media queries and how they work.

This worked excellently thank you

No problem. Happy to help!