Steve Price Steve Price - 1 month ago 8
CSS Question

Issue getting divs aligned correctly as screen size is reduced

I have an info bar displayed on page that is set to be 76% of the full screen width when viewed at 1278px wide (native size on my macbook)
This div has to be centered so that it sits directly above a carousel.
The info bar contains three divs and each of these contains an icon and then some text. The problem I'm having is that as the screen width is reduced the text drops below the icon, whereas I want the whole content to reduce in size and maintain the overall spacing so that it is always aligned with the carousel below. Once the screen reaches smartphone size it stacks the info bar vertically. (media query size yet to be set, but example size used here)
HTML

<div id="info-bar">
<div id="container">
<div id="quickquotes" class="info">
<i class="icon-quote"></i>
<div class="text-area">
Quick Quote Fast Response</div>
</div>

<div id="delivery" class="info">
<i class="icon-delivery"></i>
<div class="text-area">
Free UK Delivery on Orders Over £100</div>
</div>

<div id="quickshop" class="info">
<i class="icon-quickshop"></i>
<div class="text-area">
Quick Shop Search Product Codes</div>
</div>
</div>
</div>


CSS

#info-bar{
background:#fff;
}
#container{
margin-right: auto;
margin-left: auto;
width:76%;
}
.info{
float:left;
width:38.5%;
margin:0;
padding: 9px 0;
font-size:0.4em;
}
#quickquotes.info{
width:30.5%;
}
#quickshop.info{
width:31%;
}
#container i {
font-size: 34px;
color: #a6d120;
display: inline-block;
vertical-align: middle;
}
.icon-quote:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quote.png");
}
.icon-delivery:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-delivery.png");
}
.icon-quickshop:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quickshop.png");
}
#container .text-area {
display: inline-block;
vertical-align: middle;
text-align: left;
margin-left: 0px;
color:#1e3e57;
letter-spacing:0.07em;
font-weight:bolder;
text-transform:uppercase;
font-size:1.1em;
}
@media only screen and (max-width: 40em) {
.info,#quickquotes.info,#quickshop.info {
float:none;
width:100%;
margin-bottom:5px
}
}


I have set up a fiddle showing the current css and html code used. (Note, I've had to add a font size much smaller than really used so that it displays in a single row on jsfiddle.

Fiddle is found at https://jsfiddle.net/4auh8zn5/1/

Answer

You can solve it with flexbox:

change your .info in CSS to this:

.info{
  float:left;
  width:38.5%;
  margin:0;
  padding: 9px 0;
  font-size:0.4em;
  display:flex;
  flex-wrap: nowrap;
  align-items: center;
}

If you want to position your icon better, you can also add this code:

#container i:before {
  position:relative;
  top:4px;
}

jsfiddle here: https://jsfiddle.net/4auh8zn5/2/

Hope it helps!