I'm having trouble achieving this look. Please help :S

Design help Layout & Design
1

Hi all!

What I hope to achieve
What I hope to achieve1920×1079 128 KB

I’m having trouble figuring out the product list area :dizzy_face:

I want to move up the second and the following link blocks on the first column

I can't seem to remove the space
I can't seem to remove the space1039×1486 117 KB

I tried to use grid and flex box, but they all reserve the space on “New donuts” line.

Can someone please help me on this?

Here is my site Read-Only: Site Link

Thanks,
Jeffrey

2

Hi Jeffrey,
The simplest way to archive that layout is to use 2 columns and just add text to one.

Let me know if that helped :slight_smile:

I’ve added you a read-only link.

https://preview.webflow.com/preview/jeffreys-question?utm_medium=preview_link&utm_source=designer&utm_content=jeffreys-question&preview=2c1ab23da0dafce4ec8f594f7ca6560b&workflow=preview

1 Like
3

Hi Jeffrey, (& Julian),

I think Julian’s solution should work perfectly. While he was writing his answer I was busy using the Grid Area’s to achieve the same result. To give you a broader perspective I thought I would share it anyway:).

So you can achieve the desired result by using Grid Areas by combining one or more grid cells. See the screenshot attached.

image
image1472×585 50.4 KB

Good luck with your project! Hope it helps.

Best,
Jesse

1 Like
4

Hi Julian,

Thank you!!! :heart_eyes:

I thought there will be an easy way to do it without manually separating two cols, so I didn’t end up trying this at the first place.

Thanks for taking your time creating this demonstration for me. I’ve successfully recreated your design.

Highly appreciate it!

Jeffrey

5

Hi Jesse,

Thanks so much for providing your solution :heart:

I’ve tried this method but ended up with lots of space in between the first few roles as shown below.

Screenshot
Screenshot1090×1360 86.7 KB

By any chance, we can reduce that space underneath the title, and Area A & C?

Thanks,
Jeffrey