[Resolved] Picture and description always on top

[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.

[Tom]

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>

[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

[Tom]

You’re welcome! 🙂

[Author]

Posts