App Academy

HTML / CSS Assessment - Sanity Check On Sizing And Format

Hello aA folks! This is my first post and I have been using the forum to help out a lot already. I am not sure if I am meeting with the following requirements and figured I would ask for help before wasting an attempt:
… is 600px wide when the screen is greater than or equal to 600px wide
… uses grid layout to layout labels and form elements when the screen is greater than or equal to 600px wide
… is the width of the screen when the screen is less than 600px wide
… lays out the labels and form elements as full width when the screen is less than 600px wide

I am not sure if I am doing it right for the width adjustment when the window size changes. Do you see any bugs or other things I should watch out for? Here are some screenshots of my code…




CSS 3

Also, any insight on making the card formatting look better would be appreciated! I think I have hit all of the requirements, but it just doesn’t look right (especially placement of the text to the right of the person’s picture).

This is the output when width is 600px or wider:

This is the output when width is 599px wide or smaller:

Hi Garrett, and welcome to the community!

From your code, it looks like you are headed in the right direction in terms of the form width requirements for the different screens, but it does look like there are some styling issues that pop up when you move between screen sizes.

On your wider screen picture, you should have a form that does not cover the whole width of your screen, as you currently do, but it looks like the form is actually much narrower than 600px (based on comparing it visually to the picture card, which should be 344px wide).

I can see that you are controlling the form width in two different ways. You have media queries for narrow and wide screens that include form width, but you also have css outside of the media queries that controls form width.

You can actually meet the form width requirements without controlling the form width in the media queries. I would recommend commenting out the form width properties in the media queries and try using just the form css with width and max-width that you already have up at the top of your css file. Pay around in the browser, making the screen width narrower and wider, and see how it behaves, and check back in with the results.

Jesse

Thank you for the insight Jesse!

I was able to get rid of the media query that was focused on min-width: 600px and remove all related width elements from the other media query. And then bringing down the formatting of the border from the form element into the media query allowed me to maintain that border once under 599px. I did not end up needing to adjust any HTML.

The formatting of the text doesn’t look the greatest, but I think I am ready to submit. Any bugs or watchouts that you see?





Hi Garrett,
I’m glad to hear that the adjustments are working out nicely!

Unfortunately, I really can’t do a final bug check for you since this is an assessment. I would recommend just doing a final read-through of the specifications to make sure you didn’t miss any details, and then just double-check the form width behavior in your browser. If all goes well after those two checks, you should consider submitting the assessment.

Jesse