CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bob
bob

Reputation: 21

how do I use @media queries properly?

My current website layout: Screenshot 1

I used a div with a wrap id to center the site:

#wrap {
width: 70%;
margin: 0 auto; 
}

but now it obviously also makes it 70% width on mobile which looks bad: SC2

I did try using media queries, the one with max-device-width specified by itself and also the ones that are on the bootstrap website under the CSS section, everytime I used any of those I removed the original #wrap css code, but nothing at all worked, my website would just go to being 100% on all devices and even if I made it 70% on mobile (just as a test) it was still the same everywhere, like there was no css code for the wrap id at all.

Sorry if it's a dumb question, i'm just lost and really want to make my site 100% at a certain (tablet-mobile) breakpoint.

Upvotes: 1

Views: 28

Answers (1)

Razia sultana
Razia sultana

Reputation: 2211

Try this:-

@media (min-width: 768px)  {
    .mymenu {
      width: 20%;
    }
}

Upvotes: 1

Related Questions