Menu icon Foundation
Making a banner with no left/right padding

RESOLVED - I added the ::before to my row div and it expanded to the perfect size! I tried making my class I am trying to add a banner image at the top of my foundation grid-based page. I've tried using exact width, I've tried using percentage, I've tried using a div above the grid, I've tried making the image too big - but that padding just stays put. Do I need to create a special "header" css or a special img style? I looked in the building blocks but everything seems to be using headers that span across the entire visible canvas and that's not what I want. My page is centered rather than filling up the entire space of the device (old style, I know, but battling too many other issues to change that now). No matter what I try, I end up with a slight bit of padding on the right and left and then my content below looks like it is expanded too far (when really it is just filling the entire space). I've added the code that applies just from the banner down to the next line of content so you can see how it is displaying. I'm sure there is something elementary that I'm overlooking but I'm new enough to the grid process that I've tried all the options I know. Thank you for any advice or direction on this. Much appreciated!

Bannerzurbproblem

<div class="row">
    <div class="large-12 columns">
    <img src="../../tabImages/Infograph20150825_1285x.png" alt="Resource Page Banner">
    </div>
<div class="row">
<div class="large-8 medium-8 columns">
    	<h4>Education</h4>

            

         

marginpaddingimagesbannersheaders

RESOLVED - I added the ::before to my row div and it expanded to the perfect size! I tried making my class I am trying to add a banner image at the top of my foundation grid-based page. I've tried using exact width, I've tried using percentage, I've tried using a div above the grid, I've tried making the image too big - but that padding just stays put. Do I need to create a special "header" css or a special img style? I looked in the building blocks but everything seems to be using headers that span across the entire visible canvas and that's not what I want. My page is centered rather than filling up the entire space of the device (old style, I know, but battling too many other issues to change that now). No matter what I try, I end up with a slight bit of padding on the right and left and then my content below looks like it is expanded too far (when really it is just filling the entire space). I've added the code that applies just from the banner down to the next line of content so you can see how it is displaying. I'm sure there is something elementary that I'm overlooking but I'm new enough to the grid process that I've tried all the options I know. Thank you for any advice or direction on this. Much appreciated!

Bannerzurbproblem

<div class="row">
    <div class="large-12 columns">
    <img src="../../tabImages/Infograph20150825_1285x.png" alt="Resource Page Banner">
    </div>
<div class="row">
<div class="large-8 medium-8 columns">
    	<h4>Education</h4>

            

         

This post has been closed. No new replies can be added.

Rafi Benkual almost 2 years ago

Glad you got it figured out! I know it's an older post, but in case anyone finds it, you probably used the .collapse class on the .row? That would be one way.