Need to make an irregular grid responsive
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm currently building a Wordpress website for a non-profit client, and am having trouble with one particular piece. I'm a web designer, but my coding skills are mediocre, so I lean very heavily on the Visual Composer WYSIWYG plugin.

The dev site where I'm working is, and the part that I need help with is the large "hero" grid toward the top of the homepage. You'll see a 4 column, 3 row grid of photos and color blocks with the words "URBAN. AG. CULTURE." along with some text links within the blocks. Everything that falls below the nav, but above the line "Growing healthy food..."

There are a few problems that I would like help solving:

It looks OK when you browser is wide, but it falls apart at smaller screen sizes. I would like help in making it fully responsive. The problem seems to arise from the upper left block, which spans two columns and two rows.

At the very least, I would like to abandon Visual Composer for this element and rebuild the grid with HTML and CSS, but I get stuck at the upper left block, which spans two rows and two columns. If someone can provide "shell" code for this irregular grid, that would be a huge help.

Lastly, I want the URBAN. AG. CULTURE. text to rest on the baseline of that block, if possible. Here is the jpeg that I mocked up for the client (this is the .psd design that they approved):

To sum up, I would like the grid element to look like the jpeg in the second link and to be fully responsive. I'm willing to tip if someone can help me solve both problems.

Thanks for your help!

Crowdsource coding tasks.

1 Solution

Ok, here is my solution, all the header is fixed


here we go the new code, when they are in a single block:


here is the code of project part 2:

link :

Thank you, this is better. The grid still comes apart at smaller screen sizes, in particular on the right side between the yellow and orange blocks. Is it possible to hold this together?
sullyrva 3 months ago
ok i will try to do it hold on
Houcem B. A. Chlegou 3 months ago
now you can see the sew solution
Houcem B. A. Chlegou 3 months ago
Perfect! Huge thanks.
sullyrva 3 months ago
thank you for the tips! :) this is my email: if you need help, you can contact me directly! :)
Houcem B. A. Chlegou 3 months ago