Product Landing Page: Presentino

I don’t understand why the input field and the button are not the same width when the window width is 600px or below.

Capture

Code Used:

@media (max-width: 600px){
  #form {
    flex-direction: column;
    justify-content: center;
    width: 80%;
  }
  #email{
    width: 100%;
    margin: auto;
  }
  #submit{
    width: 100%;
    margin: auto;
  }
}

Hey there,

nice to meet you! :wave:

There is a CSS property called box-sizing.

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

Source

The default value of this attribute is:

content-box: Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included.

When you use width: 100% on your input, you give your input content the width 100% and the border and padding go on top. That’s why it overflows. When you hover over the element in the Dev Tools, you can see this.

You can have a look at this one:

border-box: The width and height properties (and min/max properties) includes content, padding and border.

I think this is what makes more sense.

Thank you so much! :+1:t2: