HTML/CSS Assessment: When browser is between 600px-615px the form compresses, but form's max-width is set to 600px

Learning Challenge

HTML/CSS Assessment

Question

I have the inspector open, and when I transition the window from 700px down to 615px the form does not change size, however, when I transition window between 615px and 600px, the form gets smaller. But, the form has a max-width of 600px, margins are 0, padding is 0. Why is the form getting smaller between 615px-600px?

What I’ve tried

Screenshots

Hi Mark - welcome to the community!

It’s difficult to troubleshoot without seeing all of the HTML and CSS code together, but here are few ideas that come to mind:

  • It could be due to multiple width values interfering with each other. For example, I see a max-width of 600px on the form, and 100% width value on some of the elements of the form. It is possible that the form is still 600px wide, but you may be seeing the elements within shrink due to box-sizing issues or something like that.
  • I would look at your elements in the HTML file, within the form. If you have a lot of nested <div>s or <fieldset>s, try commenting out some of the nesting to see if the shrinking behavior changes.
  • You could also play around with some alternate ways of setting the width value. Check out this documentation, which also has a note about defining width in conjunction with border-box.

Try out some of these ideas, and let us know if the behavior changes.
Jesse

Hi Jesse, thanks for your reply.

  • If max-width overrides width, the max-width value is 600px so there shouldn’t be an issue?
  • If I made a mistake in nesting, I’ve attached a screenshot of the html code
  • Could it be that the form includes the borders and the 600px includes areas to the left and right of the labels/inputs? I have padding and margin at 0 though. Screenshot of what I’m talking about below the html code.


Screen Shot 2020-11-17 at 12.22.14 PM Screen Shot 2020-11-17 at 12.22.07 PM

I suspect the box-sizing might be adding border or padding around your form.

When you are in Inspect in the chrome dev tools, try clicking directly on the form element and looking at the styles that are displayed below the DOM elements (or to the side, depending on your layout). You can then try unchecking some of the CSS styling to see how it affects the output. My guess would be that the box-sizing might be adding a bit of border or padding on each side of the form, which might be causing that 15 px difference that you are noticing.

Let me know what you notice playing around with the styles in Inspect.

1 Like

Hi Jesse, your recommendation of viewing the displayed styles was really helpful. I was doing this before but from a different screen/view and didn’t get the same value.

After doing that, I noticed had a 8px margin being applied to it in all directions which must be the default since I hadn’t specified it. I then played around with potential solutions within the form: removing the box-sizing like you mentioned, removing the fieldset tag in html, trying different methods of making the form margins zero. Then I just went straight to the body element (since there is nothing in my html or css saying what the body should or shouldn’t do). I eliminated in html, and added a reference in css then set margins to 0 and that eliminated my problem!

Two Follow-up Questions:
(1) The directions do not state the form should have a border, and there is no reference picture like the card. When I use this forum for help and see others’ photos, their forms have borders. Should the form have a border? Having a fieldset tag encompassing the form adds a border and shrinks the form. So having a fieldset tag in the html would shrink the form to be smaller than the 600px even if the form’s width or max-width is set to 600px, because it is within the fieldset and the fieldset border margins override the body and form margin settings.

(2) For the card, is the drop-shadow on the outside of the gray border? or the outside of the group of photos/text/whitespace? or for each individual photo? The directions say “moves their pointer over a picture card” and there isn’t a gif/video of the transition.

& Thank you for your help!!

Hi Mark,
I’m glad the tip was helpful; it’s a great way to quickly play around with and test out different styling options before adding them to your code.

  1. The test specs for the assessment do not include a border for the form. It is fine to have a border, and fine not to. It’s really up to you.

  2. You should apply the drop shadow to the entire card, which would be around your gray border.

Jesse