HTML/CSS Pre assessment form issue

I got an 11/12 on my html assessment with the feedback:

The questions you missed were:

<strong>* has a 'form' element that is 600px when the window is wider than 600px</strong>

I am not sure how to fix this problem. Right now I believe that my form does this successfully. In order to handle this I have the following code in my css:

@media (min-width: 600px){
  form{
    width: 600px;
    display:grid;
    grid-template-columns: 600px;
}

The form appears to stay at 600px when the windows is resized to greater than 600px, although the form elements are not all equal length. Any help would be appreciated!

Hi, @brbwang! Would you mind posting a screenshot of your browser at a 600px width?

My guess is that you would want your media query to be:

/* apply this css at 600px and below */
@media (max-width: 600px) {
  form{
    width: 600px;
    display:grid;
    grid-template-columns: 600px;
  }
}

Hi @bryanray! Of course. Here is my browser at exactly 600px wide

I am currently using width=100% outside the media query to make the form width match the window width when the window is < 600px wide.

The margin pushes the form off screen, but here is another screenshot scrolled over the show that the width of the form seems to be 600px.
Browser window width is exactly 600px
Screen Shot 2020-06-24 at 6.12.08 PM

I think the important thing to note is that when you’re viewing exactly at 600px wide … you can see how your form is pushing past the right side of the browser. That is ultimately what we are testing for. We want to ensure that the form is not going past 600px.

One thing to do is to put your browser at 550px and just double check that the width of your form is less than 600px by “inspecting” the form element and looking at it’s size using Google Chrome’s inspection tools.

Would you mind pasting the code that you have that is specifying this?

I feel like I’m pretty close to being finished, but I cant seem to get the hover feature down, nor can I figure out how to position the text in the correct places. Any insight on the box-shadow transitions?Screen Shot 2020-06-24 at 4.10.24 PM
I also apologize if this wasnt where i should have asked this question.

@AfroCode

This is my first time using CSS transitions, but I think that you have the box shadow always being applied to the element, as opposed to just when the mouse is hovering. Try putting something like
“transition: box-shadow” in the .card section; and then put the “box-shadow: [your specifications]” in the .card:hover section.

1 Like
@media (min-width: 600px){
  form{
    width: 600px;
    display:grid;
    grid-template-columns: 600px;
  }
}
form{
  width: 100%;
}
label{
  width: 100%;
  max-width: 600px;
}
textarea, select, button, input{
  width: 100%;
  max-width: 600px;
}

This is my css for the width of form elements.
When inspecting the form element the width is 100% while the browser window is <600px wide.

The form only extends past the right side of the browser once the browser has a width of 600px - 615px. I think this may be because I enclosed the form inside a div with a padding of 5px, so when the width changes from 100% to 600px it is pushed beyond the window by margin/padding.

Would making sure that the form never extends past the browser window fix my issue?

Thanks for the quick responses!

My sincerest apologies. I have been reading the test that was failed incorrectly … I thought you were talking about the test failing when your browser was below 600px. So sorry!

I think ensuring that your form never extends past 600px would fix your issue. I think rather than using a form { width: 100%; } you could use a `form { max-width: 600px; } to solve your problem.

Would you mind showing me a screenshot of your form when your browser is sized at like 700px?

Thank you for that. I tried it and it seems to work. But the shadow is there, and when I hover over it, it goes away. Is that how it’s supposed to be, or did I do it backwards?

@AfroCode That’s backwards. The shadow should appear upon hovering similarly (these specifications are different, but it shows kinda how it should look as far as when the shadow should be there) to how it does here https://codepen.io/ovdojoey/pen/BomKyZ .

(If you have any further questions, go ahead and make a new topic as to not continue to clutter up brbwang’s post.)

–Brandon

1 Like

Oh it’s no problem! Thank you for your continued assistance.

Here is my form at browser width 700px:

My confusion is that I believe I am already constraining the form to a max width of 600px. When switching my form css to max-width, part of the right side of the form still cuts off when the browser width is 600px or slightly wider than 600px.

This looks like it should be correct. I can see the max-width setting your developer tools. And visually it looks like it’s correct now. :+1:

Have you attempted to submit your latest?

Hey Brian, did you ever figure this out? I am having the same probelm.