Hi there,
I have the following code which is running Foundation framework.
What I am having issues with is getting the main copy section to appear directly below the “Panel 1” and “Panel 2” blocks when on a large/desktop site. It works fine on medium/tablet though.
I’m guessing its something to do with the push/pull I have in place?
This is my code:
<div class="row">
<!-- right -->
<div class="large-9 large-push-3 columns ">
<div class="large-7 medium-12 small-12 columns no-padding-right" style="position:relative; z-index:201; height: 200px; background: #ccc">
PANEL 1
</div>
<div class="large-5 hide-for-medium hide-for-small columns no-padding-left">
PANEL 2
</div>
<div style="clear:both; position: relative"></div>
</div>
<div class="large-3 large-pull-9 medium-4 columns">
<div class="large-12 panel radius">
<form>
<div class="row">
<div class="large-12 columns newsletter">
<p class="no-margin">Join our mailing list</p>
<span>Receive news, discounts & more</span>
<div class="row collapse">
<div class="small-10 columns">
<input type="text" placeholder="enter your email address..." class="no-margin">
</div>
<div class="small-2 columns">
<a class="button prefix newsletter no-margin" href="#"><i class="fa fa-caret-right"></i></a>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="large-12 panel radius">
<div class="row">
<div class="large-12 columns newsletter">
<p class="no-margin">Blog</p>
blog feed
</div>
</div>
</div>
<div class="large-12 panel radius">
<div class="row">
<div class="large-12 columns newsletter">
<p class="no-margin">face tweet</p>
social feed
</div>
</div>
</div>
</div>
<div class="medium-8 columns">
COPY HERE
</div>
<!-- end sidebar -->
</div>
Any ideas what I have wrong?
Thanks!