Move 3rd item under 2nd in flexbox

Asked Aug 09 '19 at 19:25

Active Aug 09 '19 at 19:33

Viewed 19 times

I have an image with center aligned text to the right, but I need the 3rd element which I have named "title", Founder, to stack under the second item named "name" Dewey Stringer. You can see what I am trying to achieve https://seewebgo.com/aas/advisory-board/

I can't seem to add any code in here, but it is visible by going to the page.

.box {
   display: flex;
   align-items:center;
}
img.round{
border-radius: 100px 100px 100px 100px;
box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.5);
margin: 30px 30px 30px 0;
}
.page-id-95 .box .name{
font-size: 30px;
font-weight: 500;
}
.page-id-95 .box .title{
color: #ccc;
text-transform: uppercase;
align-items: baseline;
}

<div class="box"><img src="https://seewebgo.com/aas/wp-content/uploads/2019/08/dewey-photo.jpg" alt="" width="202" height="202" class="alignnone size-full wp-image-175 round" /><p class="name">Dewey Stringer</p><p class="title">Founder</p></div>
</div>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>

edited Aug 09 '19 at 19:33

asked Aug 09 '19 at 19:25

Lynne

Can you have a fixed height on the `.box` container? – Michael Benjamin Aug 09 '19 at 19:36
Why would I need to add a fixed height? When it goes mobile that will be a problem? – Lynne Aug 09 '19 at 19:42
It's explained in the duplicate. Here's how it would work for you in flexbox: https://jsfiddle.net/d1jw9q2g/1/ – Michael Benjamin Aug 09 '19 at 19:43
OK, that worked, could you please explain a little??? – Lynne Aug 09 '19 at 19:49
My apologies, I'm new to flex, so not quite grasping the why's and wherefore's – Lynne Aug 09 '19 at 19:51
Please read the duplicate post for an explanation of the flex concepts involved in the solution. That post also provides an alternative solution, using CSS Grid. Read [this post](https://stackoverflow.com/a/43897663/3597276) for additional details. – Michael Benjamin Aug 09 '19 at 20:01
Thank you for your help – Lynne Aug 09 '19 at 20:04

Move 3rd item under 2nd in flexbox

0 Answers0