Build a Product Landing Page(About Iframe)

Build a Product Landing Page(About Iframe)
0

Tell us what’s happening:
https://codepen.io/freeCodeCamp/pen/RKRbwL
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:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

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.