App Academy

Form Resizing Question

I didn’t have any issues with this part when I submitted before, but want to know if both options I’ve created are legitimate. I submitted before with the second option but option 1 seems simpler and more readable.

Option 1 using max-width property:

Option 2 using max-width and screen:
Option2

Thanks!

Hi Matthew,
You are right, you can accomplish this task using either approach; just applying styling to the form element, or tackling the different screen sizes through code in a media query.

I agree that your option 1 is more readable because all of the form width styling is in one place. This would also make your code easier to debug if it wasn’t behaving as expected.

If you plan to make a change, just make sure you fully test out the behavior in the browser before re-submitting!

Jesse

Another question just to make sure there isn’t something I’m missing. The point about about laying out the labels says “… lays out the labels and form elements as full width when the screen is less than 600px wide.” I’m assuming that what it is looking for with the labels is to make them a block element, so that the text will look right justified but the input will drop down below the label. Is this correct or is it asking to actually stretch the label across the entire width of the form.

It should look like this:
Label Layout

You interpreted this correctly - the labels look good to me. No need to stretch the text!

1 Like

I’ve noticed one more thing. I noticed that at 600px the form labels and inputs started using the grid layout but the form didn’t stop resizing until the screen was 616px. This is due to page margins. When I set the page margins to 0 this doesn’t happen. Should I set the page margins to 0 to ensure this transition is smooth or does that matter for this exercise?

In the real world where you would want the page margins, but don’t want this sloppy transition would it make more sense to change the form width to 584 or change the screen to 616? My thought is to change the form width since you’re usually laying out for a certain screen resolution.

I would recommend changing the code to ensure a smooth transition, but overall, that issue shouldn’t impact the tests.

I think I would also agree with your second point - you would typically be creating the layout to respond in a certain way on some of the most common screen sizes. There may be cases in which you would be following very specific specs from a UI designer with a need to use exact pixels, but in a lot of cases you will use the code that overall responds the best given a certain screen size.