Build a Product Landing Page(About Iframe)

HTML-CSS
1

Tell us what’s happening:


Can somebody help me with the CSS styling of the Iframe on the freecodecamp’s example code?
I googled the max-width property.
But I still can’t figure out what does it mean to set the max-width’s value and then setting the width property to 100%.
Does this mean that the iframe element’s width value of 100% should be 560px?
Thanks.

Your code so far

#how-it-works > iframe {
  max-width: 560px;
  width: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:

2

Setting the max-width property on an element forces the element to be no bigger that the value. In your example:

  • I want the iframe to be no larger than 560px
  • However, until it gets to that width, I want it to be 100% width of the parent element.