FCC Product Landing Page stuck on features products

I tried to do the same section on product features :

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)

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.

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

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;
}

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

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

I will give it a try

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