FCC Product Landing Page stuck on features products

HTML-CSS
1

I tried to do the same section on product features :

image
image930×347 24 KB

But, it doesn’t work

My attempt: https://codepen.io/crypticplutus/pen/mdRgwJx

Can someone help me please?

(I don’t learn how to use Flexbox yet)

2

You pretty much have it correct. You need to add a width property in your #text-row so the text can start closer to the images. Alternatively you can use float:left on your imginstead of float:right on your #txt-row.
You will need to adjust the margins of your <h1> and potential <p> elements in your #text-row div so they would fit inside.

Example: https://codepen.io/bill-ye/pen/oNBRygR

Btw these things are much, much easier using flexbox, and way easier to expand as well.

3

Thanks for your help,
I’ve tried to adjust the margins of the text but it won’t fit inside

https://codepen.io/crypticplutus/pen/mdRgwJx

4

You have to clear the container. Using overflow: hidden is the easiest way.

.row1 {
  background-color: blueviolet;
  width: 100%;
  overflow: hidden;
}

But I would suggest you use flexbox instead of float.

  1. Switch the text and image in the HTML.

  2. Remove the display: inline and float: right from #text-row1

  3. Set the container to display: flex and use justify-content: space-between for the spacing and align-items: center for the vertical alignment.

Example 
.row1 {
  background-color: blueviolet;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#text-row1 {
  /* display: inline; */
  /* float: right; */
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 15px;
  margin: 0;
  padding: 0;
}
5

It works : https://codepen.io/crypticplutus/pen/mdRgwJx

Effectively, it’s much easier using Flexbox
I think I have to learn how to use it

6

You should totally learn flexbox. There are tons of tutorials out there but here are a few resources.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

7

I will give it a try

8

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