Menu icon Foundation
Center Div on-top and in between two divs

Hi,

I just started using Foundation and I like it a lot. I have a question. I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).

The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.

Is there a possible improvement that I could do to better integrate the logo into Foundation? In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?

    <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>

.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; 
}

Center box

center div

Hi,

I just started using Foundation and I like it a lot. I have a question. I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).

The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.

Is there a possible improvement that I could do to better integrate the logo into Foundation? In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?

    <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>

.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; 
}

Center box
Rafi Benkual about 5 years ago

You could do it with centered columns as well http://codepen.io/rafibomb/pen/Dijxh

Filemon Salas about 5 years ago

Thanks a lot.

Filemon Salas almost 5 years ago

@Rafi Benkual

One last question. How would you resize the logo for small screens?

Based on the CodePen you posted, pretend that you would want to make the logo half of its size when viewed in small screens, how would you do this in Foundation.

http://codepen.io/rafibomb/pen/Dijxh

EDITED:
is this how it should be done? Is this how you call media queries in Foundation?

@media only screen and (max-width: 40em) {
.logo{
width:100px;
margin-left: -50px;// half-width of logo
}
}

Thanks a lot.

Rafi Benkual almost 5 years ago

That is correct. Or you can contain the image in a narrower set of colums. Image size is controlled by the container width.

Filemon Salas almost 5 years ago

Thank you for your reply.

@Rafi Benkual
"Or you can contain the image in a narrower set of colums. Image size is controlled by the container width."

How hard would it be for you to create a small example of what you are suggesting here? The main reason I'm a little confused is because the logo is absolutely position and I'm not sure how this would work in Foundation.

Thanks a lot.