Problem with divs & flexbox

HTML-CSS
#1

Hi!
I’m trying to complete the Product Landing Page exercise and I’m having some trouble…
I’m trying to use flexbox in order to have the following layout:
one div the whole row (title)
one div the whole row (banner)
two divs, each one spreading to 50% of one row (features & video)
another two divs, each one spreading to 50% of one row (pricing & newsletter form).

For some reason I cannot understand, the two last divs (pricing & newsletter) are hidden from the webpage…

Any help or tip would be very very much appreciated!

https://codepen.io/kostastestis/pen/MMvKgV?editors=1100

#2

You’re missing the closing “>” on your opening iframe tag:

<iframe width="560" height="315" src="https://www.youtube.com/embed/bGdMTIxU9Uc" frameborder="0" </iframe>

Should be:

<iframe width="560" height="315" src="https://www.youtube.com/embed/bGdMTIxU9Uc" frameborder="0"> </iframe>

1 Like
#3

Oh, god! Haha! Thank you very much!!!
Do you also know how can I align the last two sets of divs under the banner (to have the same width as the banner does)?

1 Like
#4

You can give the .row a max-width and auto margin. Then remove the default margin on the figure element and give the video 100% width.

.row {
  width: 100%;
  display: flex;
  justify-content: center;
  max-width: 1080px;
  margin: auto;
}

#banner-section {
  margin: 0;
}

#video iframe {
  width: 100%;
}
1 Like
#5

Thank you very much!! :smiley:
Should I add a margin-top for the two bottom DIVs or would you suggest a better solution?

#6

You might also just add a bottom margin to the row container. That way all rows will have the same spacing, which can give a more even vertical flow.

.row {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 40px auto;
}
1 Like
#7

Thank you!
I really appreciate your help!
Do you have any other suggestions or did you see any piece of “bad code” you’d like to mention?

#8

  1. I would still remove the default margin on the <figure> to make it flush with the columns below it.

  2. Your video is not responsive, search for some solutions (this site can generate the HTML/CSS for you).

  3. Add align-items: center; to the .row in the media query, this won’t fully align the elements but it’s a start. You should probably also switch the 50% (col-half) to be 100% when the layout is stacked.

@media(max-width:768px) {
  .row {
    flex-flow: column wrap;
    align-items: center;
  }
}

  1. I would see if you can improve the look of the form. Search for some examples and see if you can get some inspiration.

  2. I would increase the font size on the nav links.

  3. Give the Features/Pricing <ul> some more line-height.

  4. Pick out a web font you like and add it to the page.

1 Like
#9

Thank you for your suggestions!!
I tried to implement the first three for start but I have some problems…

About #1, I didn’t get exactly what you mean…

Regarding #2, I added the code provided by the site you mentioned but the video frame is very small and I can’t understand why…

Lastly, I added the code bits you told me (align-items: center;, etc) but the content still doesn’t seem to align properly…

#10

  1. You did this already, not sure when.

  2. .embed-container is a class but you are using it as an id in the HTML

  3. Right, it’s just aligning the .col-half elements and now that they are 100% it doesn’t make any difference. One option is to make the .col-half a flex container and do the alignment on it. You will have to compensate for this on the #video-container by adding flex: 1;.

@media(max-width:768px) {
  .row {
    flex-flow: column wrap;
  }
  
  .col-half {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #video-container {
    flex: 1;
    text-align: center;
  }
}
1 Like
#11