0

I have an example of zurb foundation grid on codepen. I'm trying to think of a way to extend a div to the right edge of the viewport but keep the left edge inline with the grid as the viewport is resized.

<div class="row">
  <div class="large-12 columns">
    <div class="my-custom-block">
      MY CUSTOM BLOCK ==> Please extend to right edge of viewport
    </div>
  </div>
</div>

Update I don't mind if the solution is outside the grid and doesn't use Foundation. I just want the my component to match the start of the grid but stay flush to the right of the viewport when resized.

zurb example

example on codepen

Neil
  • 7,861
  • 4
  • 53
  • 74
  • Related - https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns – Paulie_D Nov 03 '17 at 17:07

1 Answers1

1

The problem is that the row class has a defined width/max-width with margin:auto on it. If you don't mind changing row to a percentage max-width you could do something like this: 

.row {
 max-width: 62.5%;
}

.special-row {
 overflow:hidden;
 width: 100%;
 float: right;
 margin-right: 0;   
 margin-top: 0;
 margin-bottom: 0;
 //this is halfway between the 62.5% above and 100%
 max-width: 81.25%;
}
git-e-up
  • 884
  • 7
  • 10
  • Would you fork the example and demonstrate it works? – Neil Nov 03 '17 at 17:31
  • The problem is your arbitrary % value may not match the left margin of the grid – Neil Nov 03 '17 at 18:07
  • Sorry, I missed the custom block in the example. I updated the codepen fork. Basically I closed the parent div.row before the custom block and changed .row to a percentage max width instead of em.This would obviously require some media queries to look nice on some widths. – git-e-up Nov 03 '17 at 20:19
  • Thanks for trying but as I suspected this approach doesn't keep the left side level with the start of a row – Neil Nov 03 '17 at 20:22
  • Please refresh the pen. I hadn't saved. – git-e-up Nov 03 '17 at 20:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158190/discussion-between-git-e-up-and-neil). – git-e-up Nov 03 '17 at 20:25