Menu icon Foundation
Row with half in grid and half fullwidth

Im posting this message in hopes to find the best way to do what I need to do. What i'm trying to do is use the normal grid, lets say a 6 and 6 and one half is normal text/content that will stay within the grid, the second half would just be a image. BUT I want that image to take up the full width and height of the second half all the way to the edge of the browser. I will attach a image to show you exactly what I mean. 

Sample of site

 

This is a sample of what i'm looking for. The text needs to stay within the grid but the image needs to break out. I have tried to use the grid off-set feature for the text block and set the row to "expand" to take up full width but it does not line up with the grid above and below. Another image to see what I mean.

Sample of what I have

 

Any ideas on the best way to get this look using the build in grid system with foundation?

Thanks

-Dan

gridFoundationfullwidthgrid-offset

Im posting this message in hopes to find the best way to do what I need to do. What i'm trying to do is use the normal grid, lets say a 6 and 6 and one half is normal text/content that will stay within the grid, the second half would just be a image. BUT I want that image to take up the full width and height of the second half all the way to the edge of the browser. I will attach a image to show you exactly what I mean. 

Sample of site

 

This is a sample of what i'm looking for. The text needs to stay within the grid but the image needs to break out. I have tried to use the grid off-set feature for the text block and set the row to "expand" to take up full width but it does not line up with the grid above and below. Another image to see what I mean.

Sample of what I have

 

Any ideas on the best way to get this look using the build in grid system with foundation?

Thanks

-Dan

Dan Crowe about 3 years ago

hoping someone could give me some advice on this?

 

Andy Wallace about 3 years ago

Dan,

Apologies if you get excited at seeing a reply to this, but I'm also looking for a solution to a similar problem.

More simply, I'd like to extend the background colour of an edge column on one side of the page full width, whilst retaining an overall grid structure for content within that row.

In pseudo-code:

<div class="row">
    <!-- This small-8 column conforms to grid -->
    <div class="small-8 columns">Main content</div>

    <!-- This small-4 to-the-edge column actually extends to edge of page (full width) 
         and has a background colour, but content within is constrained to grid -->
    <div class="small-4 columns to-the-edge" style="background-color: blue">Side content</div>
</div>

Whilst that HTML doesn't make logical sense, I hope it illustrates what I'm thinking of.

If you find a solution, I'd be grateful if you could share it.

Thanks!
Andy