DeepestGray DeepestGray - 3 months ago 12
CSS Question

Text beside image moving when resized

I'm working on a website and I'm trying to list some text with image about it, but when the win is resized the text move behind image..
I look for answers on related topics, try all solutions but nothing to do.

no-resized

resized

sorry for the paint draft,
but we can see a container div, div for img (to manage display) and anothe div for the text

CSS:

#listWithImg .img {
display: inline-block;
float: left;
width: 45px;
height: 45px;
margin: 10px;
}
#listWithImg ul {
width:100%;
padding-bottom: 0px !important;
padding-top: 0px !important;
margin-top:0px !important;
margin-bottom: 0px !important;
}
#listWithImg .description {
float:right;
display: inline-block;
}
#listWithImg .line {
display: inline-block;
}

<ul>
<li>
<div class="line">
<div class="img">
<img class="alignnone size-full wp-image-380" src="linkImg" alt="img.png" width="32" height="32" />
</div>
<div class="description">
<h6>Text-Small-Title</h6>
</div>
</div>
</li>
...


Thanks all for help !

Answer

It's ok! if you want children "img" and "text" side by side you need to change display of parent:

.line {display: flex;}

You can play with children's display CSS

.img {
   flex-direction: row;
}

.text {
   flex-direction: row-reverse;
}
...

Thanks all!

Comments