Jump to content
Community Forums
Search In
  • More options...
Find results that contain...
Find results in...
JimiWikman

Building a dynamic 4 post block

Recommended Posts

Building a 4 post block for the news section using only IPB styles proves to be a bit tricky.

I can use the default CSS for ipsGrid

<div class='ipsGrid'>
	<div class='ipsGrid_span6'>Big Image</div>
	<div class='ipsGrid_span6'>
		<div class='ipsGrid'>
          <div class='ipsGrid_span12'>Middle Image</div>
          	<div class='ipsGrid'>
              <div class='ipsGrid_span6'>Small Image</div>
              <div class='ipsGrid_span6'>Small Image</div>
          </div>
      </div>
</div>

This will give me a basic structure that will scale, which is not what I want. I want The big image to break out and cover the whole view, making it a span 12. I also want the middle image to break out and become a span 12, which make the two small images remain span 6 items.

The idea is to use the ipsGrid_collapseTablet class that turn the wrapper into a span 12. In theory I only need to use this on two of the divs.

<div class='ipsGrid ipsGrid_collapseTablet'>
	<div class='ipsGrid_span6 '>Big Image</div>
	<div class='ipsGrid_span6'>
		<div class='ipsGrid  ipsGrid_collapseTablet'>
          <div class='ipsGrid_span12'>Middle Image</div>
          	<div class='ipsGrid'>
              <div class='ipsGrid_span6'>Small Image</div>
              <div class='ipsGrid_span6'>Small Image</div>
          </div>
      </div>
</div>

Now, lets try that out and see what happens 🙂

5blocks.jpg

Share this post


Link to post
Share on other sites

That went pretty well, but it took some adjustments and tweaking to get done 🙂

Next I'll clean up the code and style the actual content to make it look good.

 

Skärmklipp 2018-04-05 21.00.14.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

here
×