How would you construct this?

Design help General
1

Hi Friends,

In the process of building my first site and was wondering if anyone had advice on how to construct this (attached)

Screen Shot 2021-07-22 at 7.03.01 PM
Screen Shot 2021-07-22 at 7.03.01 PM2880×1184 180 KB

or if it’s even possible?

My initial thought is to create a grid with div blocks but not sure how to get the line in the center. Any advice would be greatly appreciated.

Thanks :slight_smile:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Marie

The simplest approach would be to use flexbox - horizontal on a parent container. Create two divs in there and in those add your text and image for each column. you might need to flex-vertical the column divs as well. The vertical line can be a div 1px wide / 100% high or use the flex alignment settings to stretch it. Place it between the two content divs.

1 Like
3

Thanks Hamish, I’ll try that!
I discovered a way to do it with a grid and div blocks but your way sounds a lot more simplified :slight_smile:

4

HammerOz’s method is simple and effective, but you might want to use a grid with div blocks if you need to make the design responsive. i.e. on smaller screens you might want your grid to stack.

1 Like
5

You could still get the blocks to stack @Anon_User, you just change the layout of the flexbox on smaller screens, no need for grid :slight_smile:

1 Like
6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.