Ive always had trouble understanding media queries … I don’t know why, but they’re really confusing to me. Can someone PLEASE help me find a solution to this problem that Im having, and potentially help me understand media queries in general?
As you may be able to see, when the width of the page is collapsed, my form and submit buttons collide with the main h1 header… Also the top navigation links fall out of the nav background div.
I designed the site to look good in full view but as you can see, things become muddled in codepen or whenever the screen size is pushed too far. Obviously I want to be able to control how the page collapses. but whenever I try I don’t get the results that I want.
I don’t understand the concept of “only screen and”. I also don’t really get the “min-width” thing. I could go on, but I think you get what im trying to get at.
Can someone please help me fix my site and understand this?
I would recommend that you sort of start over using a narrow-first/mobile-first approach to styling. Narrow your browser as skinny as it will go and style the page so that everything looks good at that skinny width. You don’t need any media queries here. This will be your base CSS.
To be honest, I’m not exactly sure what you are attempting to do with the layout so I can’t offer any specific advice other than the above. If you gave us more details perhaps? But my suggestion would be to get it looking as good as you can in a narrow view port and then if something still isn’t quite right you can ask here about.
Ok great I think I will try this. However, even if I start off narrow, won’t I need to use media queries once I start designing the desktop version of the site? Seems like I’ll be be back at square one.
I think I figured it out. I added a media query and that kinda fixed my issue.
But yeah back to the narrow view. Wouldn’t I need to use media query regardless?
You may need to use media queries, but you would use them for the wider view, not the narrow view. Your queries would use min-width instead of max-width.
Ok, I was able to fix everything. I got it all working! I just needed to get the measurements right for how I wanted everything to respond when the page collapses. I still will add some breakpoints for the height, making the navigation bar responsive to the collapse, but for now the site is working fine on all devices. Cool! Just wanted to update, and thank you for your help.
Hey @bbsmooth quick question! when implementing media queries, do you have to make a separate query for every size of device, or is there a way to only make a few?
Normally, I end up making a separate query for iPhone se, 8, 8 plus, iPad mini, pro etc.
Is there an easier way to do this? I suppose its not absolutely necessary because I am using Flexbox; so things are laid out relatively well, but I want the layout to look nice! So, I have to nudge things around to fit properly.
My question is, by creating so many media quires am I doing something wrong? I feel like there should be a better way. Whats going on?
As far as I’m concerned, yes, there is definitely a better way. Mind you, not everyone agrees with me on this, but in my opinion, using em units for the break points instead of px units is the better way to go. When using em units you don’t have to worry about the different device sizes, you just worry about the content itself. In other words, you let the content determine the break points, not some arbitrary px width.
A simple example, you have a nav menu at the top that needs to change to a hamburger icon at some point as the browser window narrows (or the font size gets larger). You know the minimum amount of width the menu needs to be able to display all of the links without the hamburger icon, and this width can be expressed in em units. So let’s say we need at least a 40em width to be able to display all of the links. That’s what you use for the break point for the menu. If the width of the browser is less than 40em then the hamburger icon shows. If it is greater than/equal to 40em then the links are shown. No pixels used. No need to worry about the various device widths. This will be guaranteed to work no matter what device you view it with because it only depends on the amount of width the menu has to display itself.
I was working on a utility to automate this type of menu. (Note, it is not a finished product, but it works well enough to give you an idea of what I’m talking about.) http://bbsm.surge.sh. You won’t find any px break points here, pure em.
I will admit, most developers use px for the break points. I know I am in the minority here, but I much prefer to let the content decide where it should break instead of some arbitrary px sizes.
Hmm interesting. Ive heard of em’s but Ive never utilized them as I would mostly use vw and vh. I’ll have to give it a try! Thanks. I’ll check out your bb Simple Menu as well , maybe that will give me a better understanding of how the em units operate.
… I don’t know why, but they’re really confusing to me. Can someone PLEASE help me find a solution to this problem that Im having, and potentially help me understand media queries in general? 
, maybe that will give me a better understanding of how the em units operate.