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
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
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
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
Thank you very much!!
Should I add a margin-top for the two bottom DIVs or would you suggest a better solution?
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
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?
-
I would still remove the default margin on the <figure>
to make it flush with the columns below it.
-
Your video is not responsive, search for some solutions (this site can generate the HTML/CSS for you).
-
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;
}
}
-
I would see if you can improve the look of the form. Search for some examples and see if you can get some inspiration.
-
I would increase the font size on the nav links.
-
Give the Features/Pricing <ul>
some more line-height.
-
Pick out a web font you like and add it to the page.
1 Like
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…
-
You did this already, not sure when.
-
.embed-container
is a class
but you are using it as an id
in the HTML
-
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