How do I create a quadrant of images/text?

I want to have a quadrant of images/text to the right of a video (and have the video and quadrant always be the same height as each other). I have created 3 columns: left column has video in it, and the two right columns contain the text/images, but I’m not sure if this is the best way to start to build this. Is there a simple way to make sure the 4 images on the right line up with the top and bottom of the video height (and stay responsive)?

I believe it would be better to have two columns. The first one (let’s call it topcol) will contain the video. The second one will contain another 2 columns (let’s call them best-col) with all 4 images/text. That way you can check the height of the best-col using jQuery and set it’s position… distance from top and bottom to be set by some simple math.

$('.topcol').height() / 2 - $('.best-col').height / 2 will determine the css top value for the best-col :slight_smile:

There are many different ways to do it. @bartekkustra is suggesting using jquery, but I think there is an easier way to do it using CSS inside Webflow (for non-coders).

Here’s a way you can do it using Columns:
You can use padding on the columns to have things “line up” the way you want them to. Then you can customize the styles on different devices.

Here’s a way you can do it using Blocks (divs):
Here you can have a wrapper div block that you can give margin/padding. You can also put each icon and text group into a block and give them all the same class with Float:Left and 50% width. Then on different devices you can customize the % to 100% so they all fit on top of one another.

3 Likes