Media Query Help

HTML-CSS
1

I’m trying to finish up my portfolio web-page but when I attempt to do a media query for the mobile viewing it doesn’t seem to be working. Could anyone see what I’m doing wrong?

@media only screen and (max-width: 500px) {
  .body{
    width: auto;
    height: auto;
  }
  nav{
    text-align: center;
    color: green;
  }
  ul{
    text-align: center;
  }
  .meet{
  background:  #ddffef;
  top: 0;
  width:auto ;
  min-height: 0; 
  padding-top: 5vh; 
  text-align: center;
}
}

here’s a link to the codepen: https://codepen.io/Coodelaly/pen/ZMzpJLPreformatted text

2

What are you trying to do when the view changes to mobile?

3

Hey!
It seems that your media works properly. You just have to double check your code which you use there.

4

Thanks for the replies!

I used three different div elements for the sections in my page, .meet .work and .end , but .work and .end aren’t even showing up in mobile, I’m trying to shrink .meet and center the nav bar but neither is happening when I try viewing on a mobile device. I’ll double check my coding but it seems that any changes I make in @media don’t show up.

5

I checked and your .work and .end are showing up for me on mobile.

The reason your media changes aren’t showing is usually because your selectors aren’t selecting the right (or any) elements. Also, in the case of float: center, there isn’t actually a center option for the float setting, so you’ll have to find another way to create the appropriate margin on both sides (hint, hint!).

Other than that one, make sure you’re selecting the correct elements. In your page, .body doesn’t select anything, because it’s looking for an element with the body class. In another case, changing the color of text in your nav elements works, but you only have links within your nav element - to change the color of those links you should target the links directly, not the parent container. Where you are centering text, you need to ask yourself if you want the text to be centered, or do you want the link itself to be centered?

To address this last one, I strongly recommend to search for an explanation of the “box model” as I think it’ll really help you position things and position the correct things. Once you have a good grasp of the box model, consider looking at working on some flexbox, for example I really enjoyed the free game flexbox zombies. But you need to understand the box model first.

Edit to add: A pretty handy reference to what is (and is not!) a valid argument for various settings (such as float) is http://devdocs.io/, it lists all of the options for different settings and what arguments they can take, as well as example usage.