Form/Screen Width *HTML/CSS Assessment

Learning Challenge

HTML/CSS Assessment

Question

I’m unsure about my CSS for the last couple of bullet points on the “Form Specification” section. It’s hard for me to gauge its accuracy by just resizing my window.

What I’ve tried

I’ve tried the below. Please see screenshots. Any help/clarification/advice would be appreciated :slight_smile:

Screenshots

Hi, and welcome to the community!

First of all, your code is very easy to follow since you used the comments with the specification. Nice job!

I have a few pieces of feedback to help you improve:

  1. First, make sure you only have one block for each media screen, and put all of the CSS code that corresponds to that size within the single block. So in your case, you would one media screen for 600px and larger, and one block for 599px and below.
  2. When you rearrange your code in this way, you’ll see that you have duplicate code, so go ahead and remove anything that is repeated. When you do that, you will see that for smaller screens, you are setting the width of the form twice with different values, and you will want to set that only once.

I hope this is helpful - let us know how it goes!
Jesse

Hello,

Thanks for the warm welcome!

I adjusted the code based on your feedback best I could. Here’s what I ended up with.

That looks much better! Next step is to try it out. Just pull the side of your browser window in and out see how the form behaves when the window is skinny vs when it is wide. You can also test this by right clicking on the page and clicking on Inspect, and then clicking on the icon that looks like a mobile device. That will allow you to use Chrome’s Dev Tools to test out your page with different screen sizes.

1 Like

Thanks again for the assistance!

Hmm…it’s still a little difficult for me to gauge the accuracy of the code since my concept of pixels is somewhere between skewed to non-existent. I played around with it a bit more, and noticed no difference between the below and what I had earlier after saving/refreshing the page. I feel like they’re either both correct/the same or I’m missing something.

Using Inspect really helps :slight_smile: I’m going to keep up the trial and error until I figure it out!

1 Like