Recently, I've started using Foundation and I must say, I'm quite impressed with it. However, I have a query regarding centering the logo in between two full divs horizontally. The current code I have works well but doesn't adapt to screen changes. Is there a more efficient way of achieving this within Foundation?
Is there a better method to integrate the logo into Foundation so that it automatically resizes when the screen size changes? Or is manually resizing for different screens the only option?
HTML
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box">
</div>
</div>
CSS
.fullWidth {
width: 100%; margin-left: auto;
margin-right: auto; max-width: initial; position: relative;
}
.logo{
position:absolute; left: 50%;
top: 20px; margin-left: -100px;// half-width of logo z-index: 20;
}
.box{
background-color: #333;
height: 120px;
margin-bottom: 10px;
}