- This topic has 11 replies, 2 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
December 20, 2019 at 1:40 am #1109473David
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-classesThanks
DaveDecember 20, 2019 at 6:06 am #1109639DavidStaffCustomer SupportHi 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.
December 20, 2019 at 6:33 am #1109681DavidI’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>
December 20, 2019 at 7:10 am #1109846DavidStaffCustomer SupportUnsemantic is a bit of a mind bender lol
Try push-60 and pull-40 insteadDecember 20, 2019 at 7:32 am #1109858DavidI 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.
December 20, 2019 at 8:11 am #1109886DavidStaffCustomer SupportWhere you have:
class="grid-40 push-40
make itclass="grid-40 push-60
and
class="grid-60 pull-60
make itclass="grid-60 pull-40
December 20, 2019 at 8:18 am #1109892DavidThat’s the one ๐ Thanks David
December 20, 2019 at 8:23 am #1109902DavidStaffCustomer SupportYou’re welcome
January 23, 2020 at 6:58 am #1141546DavidHello
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
DaveJanuary 23, 2020 at 7:10 am #1141561DavidStaffCustomer SupportIf 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>
January 23, 2020 at 7:18 am #1141576DavidThat’s where I’ve been going wrong! Thanks David.
January 23, 2020 at 7:22 am #1141586DavidStaffCustomer SupportIts a mind bender lol
Glad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.