manuel manuel - 2 months ago 17
CSS Question

Flex justify-content: center overwrite

I'm having an issue with flex and I have been giving it thought and don't understand what my code is doing.

So my goal is to center image and text using FlexBox. I used

justify-content: center
to center the containers on the x-axis and
align-item: center
to center the containers on the y-axis.

It works like butter except for when I collapse it. I implemented
flex-wrap: wrap
because I want the picture to drop down underneath, this works just fine.

But when I decrease the screen even further the text container for some reason skews to the left. It seems like
justify-content: center
is being overwritten. Can someone explain what is happening and how to fix this?



#smaller-image{
width: 250px;
height: 250px;
border-radius: 50%;
}

.parent{
border-style: solid;
border-color: green;
max-width:1000px;
min-height:500px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;

}

#aboutmetext{
width: 600px;
margin: 0 20px 0 0;
border-style: solid;
border-color: green;
text-align: right;

}

#tryout{
border-style: solid;
border-color: green;
}

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">MMB</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a><li>
</ul>
</div>
</div>
</nav>


<div class="parent">
<div id="aboutmetext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita relinquet duas, de quibus etiam atque etiam consideret. Atque his de rebus et splendida est eorum et illustris oratio. Claudii libidini, qui tum erat summo ne imperio, dederetur. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Sint ista Graecorum; Duo Reges: constructio interrete. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. At iam decimum annum in spelunca iacet. Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse;</p>
</div>
<div id="tryout">
<img src="http://res.cloudinary.com/dqoqzoncd/image/upload/v1474214059/YzW4rUu_f69vph.jpg" alt="Manuel Martin" id="smaller-image">
</div>
</div>





CODEPEN LINK: codepen.io/mmartinb

Answer

It's due to this CSS rule (the right margin of 20px in there):

#aboutmetext{
  width: 600px;
  margin: 0 20px 0 0;
  border-style: solid;
  border-color: green;
  text-align: right;
}

You can simply create a media query that sets this margin to 0 as soon as the blocks are displayed below each other.

Comments