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 http://tricycle.93-octane.com, 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): http://93-octane.com/clients/tricycle/index.html

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!

awarded to Chlegou

Crowdsource coding tasks.

1 Solution


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

http://codepen.io/anon/pen/dvwqPX

EDIT :

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

http://codepen.io/anon/pen/LWMMBW

EDIT 2: PART II

here is the code of project part 2:

link : https://codepen.io/anon/pen/vmKGLG

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 9 months ago
ok i will try to do it hold on
Chlegou 9 months ago
now you can see the sew solution
Chlegou 9 months ago
Perfect! Huge thanks.
sullyrva 9 months ago
thank you for the tips! :) this is my email: nicolastsue@gmail.com if you need help, you can contact me directly! :)
Chlegou 9 months ago