Flexbox not working?

HTML-CSS
1

I am having trouble with my flexbox on About page.

My ideal style would be to have a picture on the left and some text on the right side by side. I used flexbox for the parent and wrapped each image and text element with div :

.flexbox-profile {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 20px;
}

In this way, I thought the image and text would be placed side by side, but this is the result I got on CodePen:

How come it’s placed in a column, not a row?

How to fix this?

2

hey @mkobayashi0801,

It is in a row but its just wrapping straight away because you have flex-flow: row wrap; this is because your description has a width of 100% by default so you will have to change this to a fixed width.

You should also move the social media into the description box too or you will have 3 boxes instead of 2 in your flexbox.

here is example…

3 Likes
3

Hi @biscuitmanz,

Thank you for your advice! I understand why now. Your example code was very helpful. My page now looks in the way I exactly wanted.

Thank you so much!

1 Like