[Resolved] Push and Pull divs

Home Forums Support Push and Pull divs

  • This topic has 11 replies, 2 voices, and was last updated 8 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1109473
    David

    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

    #1109639
    David
    Staff
    Customer Support

    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.

    #1109681
    David

    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>

    http://185.20.51.60/~woodsidefisheryc/fishing/

    #1109846
    David
    Staff
    Customer Support

    Unsemantic is a bit of a mind bender lol
    Try push-60 and pull-40 instead

    #1109858
    David

    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.

    #1109886
    David
    Staff
    Customer Support

    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

    #1109892
    David

    That’s the one 🙂 Thanks David

    #1109902
    David
    Staff
    Customer Support
    #1141546
    David

    Hello

    Im struggling with the push and pull divs again – how can I get the image to move above the text box on mobile…

    https://ibb.co/WnvrKy2

    On this page…
    http://185.20.51.60/~rapidpersonnelco/clients/

    Thanks
    Dave

    #1141561
    David
    Staff
    Customer Support

    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>
    #1141576
    David

    That’s where I’ve been going wrong! Thanks David.

    #1141586
    David
    Staff
    Customer Support

    Its a mind bender lol

    Glad to be of help

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.