I am on the first assessment with HTML/CSS, and I notice when I enter max-width: 600px to my form on my stylesheet, the form that renders looks correct on the browser, but at 599px all my input elements and boxes are aligned and smooth, but when I increase the size of the screen, the boxes jump a little further than 600px (looks like they extend to about 618 pixels, and they all end on different widths, they are not a smooth column anymore. I have no idea what I am doing wrong or where to begin to fix this. I tried entering box-sizing: border-box; but that didn’t help. Not asking for the answer itself, but can someone point me in the right direction or give me a hint or clue where I’m messing up? I dont want to waste an attempt on this if its wrong, but I can’t tell why. Thanks!
I also ran into similar problems on my first go around and also tried to used box-sizing: border box. There might be a way to do it with that but I couldn’t figure it out so went another direction. It would be helpful to see your code to figure out what’s yielding these results so without it I can only really tell you what I did to complete this part of the assessment. I used media queries, which are basically conditionals that allow you to run certain styling depending on whether certain conditions are met (in this case the width). Just google media queries for width of screen and there will be easy examples that you can model after. Just make sure you have the right styling under each query depending on what they want the layout to be when it’s less than 600px or 600px or greater.
this is what I got so far, and this code (so far) causes the 600px width to jump a little over 600px off screen when I make the screen exactly 600px.
I would make another media query for when the page is less than 600px wide, and maybe play with using % for width as opposed to a specific pixel count. I also used margin for both and auto for grid template columns but I leave that up to you to investigate since I’m not sure if you need it.
Good morning, and Happy New Year!
It looks like you’ve got a few ideas to try. Let us know if you run into any more questions after trying out those ideas!