Product landing Page resizing help

Couple of questions:

  1. How come my h1 does not resize like my features list? I did not add any resize elements in CSS for the features section, but it resizes by itself. How come the h1 element does not resize by itself as well?

  2. How come my iframe is not being responsive? How do I make it so that it doesnt cover the navbar while resizing?

Any other general comments/feedback are welcome.

For the second part you need to add z-index Property to the header

z-index: 2;
1 Like

Your #home section is set to a width of 700px. This means the section will not resize unless this width is changed.

This can be fixed by using:

#home {
  max-width: 700px;
  width: 100%;
  margin: auto;
  padding-top: 50px;
}

header {
  z-index: 1; /* Any value 1 or above */
  top: 0;
  width: 100%;
  display: flex;
}

Since by default items on the page have a z-index of zero, giving a z-index of 1 to the header make sure it overlaps all items with a z-index of zero and below.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.