Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Picture and description always on top

Home Forums Support Picture and description always on top

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #168564
    Mosche

    Hi Tom,

    On the generatepress.com home page there is a really nice effect at the “keep reading” section.
    There is a description followed by a picture. But on the next part it alternates and then you have a picture left and description right. However on smaller screens the content switches around. But alternately so the picture is always on top.
    I was wondering how you create that effect. That the picture part is always the one on top on smaller screens. Regardless if it started out on the left or on the right.

    #168606
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m using GP’s built in grid system.

    You can use push and pull classes like this:

    <div class="grid-container grid-parent">
    	<div class="grid-30 push-70">
    		Image HTML in here (30% wide), pushed 70% to the right
    	</div>
    	<div class="grid-70 pull-30">
    		Content in here (70% wide), pulled 30% to the left
    	</div>
    	
    	<div class="grid-30">
    		Image HTML in here (30% wide)
    	</div>
    	<div class="grid-70">
    		Content in here (70% wide)
    	</div>
    	
    	<div class="grid-30 push-70">
    		Image HTML in here (30% wide), pushed 70% to the right
    	</div>
    	<div class="grid-70 pull-30">
    		Content in here (70% wide), pulled 30% to the left
    	</div>
    </div>
    #168629
    Mosche

    Hi Tom,

    As always thank you for the quick reply. I copied the code and added my content. I had to play around with the sizes and the amount of text. But it worked like a charm. This grid system is simply amazing.

    Thanks,

    Mosche

    #168630
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.