Archived topic
Push and Pull divs
11 replies · Started by David on December 20, 2019
Hello
I'm trying to push a div to second position and pull a div to first on mobile, but can't seem to get it to work.
It's on this page...
http://185.20.51.60/~woodsidefisheryc/fishing/
So basically the second row, which is text on the left and image on the right on desktop, when going to mobile the image needs to move above the text - like the first block does (which is image on the left and text on the right)
Here is my code...
<div class="grid-container section-pad-top">
<div class="grid-40 tablet-grid-40">
<div class="home-images-container">
<div class="img-grunge"><img class="width-60-mobile" src="http://185.20.51.60/~woodsidefisheryc/wp-content/uploads/2019/12/the-lakes-homepage.jpg" alt="the lakes"></div>
</div>
</div>
<div class="grid-60 tablet-grid-60">
<div class="text-box spacer-top-25">
<h2>The Lakes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="grid-container section-pad-top">
<div class="grid-60 tablet-grid-60 mobile-push-100">
<div class="text-box spacer-top-25">
<h2>The Lakes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="grid-40 tablet-grid-40 mobile-pull-100">
<div class="home-images-container">
<div class="img-grunge"><img class="width-60-mobile" src="http://185.20.51.60/~woodsidefisheryc/wp-content/uploads/2019/12/the-lakes-homepage.jpg" alt="the lakes"></div>
</div>
</div>
</div>
<br><br>Any help would be great on this as I've followed this via the link below...
https://unsemantic.com/css-documentation#6-push-amp-pull-classes
Thanks
Dave
Hi there,
if I remember correctly you need to create you grid in Mobile stacking order and use the push- pull- classes for you desktop and mobile layouts.
I've change it to this which works, but it's no longer sitting inside the container, any ideas why?
<div class="grid-container section-pad-top">
<div class="grid-40 tablet-grid-40">
<div class="home-images-container">
<div class="img-grunge"><img class="width-60-mobile" src="http://185.20.51.60/~woodsidefisheryc/wp-content/uploads/2019/12/the-lakes-homepage.jpg" alt="the lakes"></div>
</div>
</div>
<div class="grid-60 tablet-grid-60">
<div class="text-box spacer-top-25">
<h2>The Lakes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="grid-container section-pad-top">
<div class="grid-40 push-40 tablet-grid-40 tablet-push-40 mobile-grid-100 mobile-pull-100">
<div class="home-images-container">
<div class="img-grunge"><img class="width-60-mobile" src="http://185.20.51.60/~woodsidefisheryc/wp-content/uploads/2019/12/the-lakes-homepage.jpg" alt="the lakes"></div>
</div>
</div>
<div class="grid-60 pull-60 tablet-grid-60 tablet-pull-60 mobile-grid-100 mobile-push-100">
<div class="text-box spacer-top-25">
<h2>The Lakes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>Unsemantic is a bit of a mind bender lol
Try push-60 and pull-40 instead
I know, I'm really struggling with it :)
What do you mean Try push-60 and pull-40 instead? I've tried some variations but no luck.
Where you have:
class="grid-40 push-40 make it class="grid-40 push-60
and
class="grid-60 pull-60 make it class="grid-60 pull-40
That's the one :) Thanks David
You're welcome
Hello
Im struggling with the push and pull divs again - how can I get the image to move above the text box on mobile...
On this page...
http://185.20.51.60/~rapidpersonnelco/clients/
Thanks
Dave
If you need to use the unsemantic for grids - your markup needs to be in Mobile order. And you push / pull the columns on Tablet and Desktop eg.
<div class="grid-40 tablet-grid-40 mobile-grid-100 service-block-right push-60 tablet-push-60">
<!-- 40% wide column with Image background -->
</div>
<div class="grid-60 tablet-grid-60 mobile-grid-100 service-block-left pull-40 tablet-pull-40">
<!-- 60% wide text and button content -->
</div>That's where I've been going wrong! Thanks David.
Its a mind bender lol
Glad to be of help
