Can't center align div block inside column wrapper

Design help General
1

I tried creating a layout using two columns: (1) an image column on the left and (2) a description column on the right. I’ve been trying to fix the alignment so that the description aligns to the center of the image so every row would have equal spacing but can’t get it to happen. Not sure what I’ve done wrong. Would appreciate any help.

You can ignore the pics and text. Just placeholders for now.

Here is my site Read-Only: https://preview.webflow.com/preview/ground-up-e74556?utm_medium=preview_link&utm_source=dashboard&utm_content=ground-up-e74556&preview=32944907250b3ac773ad6cb1f2170959&mode=preview

2

Hi @pocks,

Your read-only link isn’t working:

image

May I suggest that instead of a using the column element, you try a grid?

You could place a div and set a background image then a paragraph and set its alignment.

Grid will also be better when you would optimise the design for different devices.

image
image1881×920 100 KB

Thanks!

3

@RohanGanachari Thanks for that. I’m not sure why the link didn’t work but now it does.

I already set up the structure using a grid and have tried both headers and paragraphs to get it right but I’m guessing there must be a way to redo the grid I already have then?

4

Hi @pocks,

The link works now.

And yes, there’s a more efficient way to do this.
Remember - lesser the elements, the better.

This is the current setup.

image
image1610×383 152 KB

The same can be achieved with lesser elements. :slight_smile:

image
image1776×412 41.8 KB

5

@RohanGanachari I’m actually still having trouble. How should I restructure the current grid I already have which already has the nav, top headline, and footer?

6

Hi @pocks ,

You have many conflicting elements in 1 grid.

I’d recommend you start over with a new grid.

  1. Use this grid as a container by adding a max-width and centring it.

  2. Add 1 div for your background image.

  3. Add another div as a wrapper, and add a heading & paragraph or any other element in it. You can align the div wrapper as you please.

Use this section only for your projects.

image
image1556×766 67.3 KB

Add 2 new sections for footer and nav bar.

If you need more help, don’t hesitate to ask.
Happy webflowing! :webflow_heart: