Problem solving flexbox or grid? 👍

Jussi · December 8, 2018, 5:27pm

Hi awesome webflow community

Trying to figure out how to use grid and flexbox to get my designs work correctly.

I have two problems.

The first section has sort of two column grid where there is image on the left and text blocks on the right. In reality there are a bunch of rows to get the text working but I can’t get the padding right… Would you do the top section with grid only or use flexbox to get it look like my design?
The second section below the above the fold part needs to have those square images with two different text blocks on top of each other as in the design. Now I can’t figure out how to stack two text boxes on top of each other when using grid. How would you create that section?

Attached you’ll find my design and here you can peak at how the design is looking at right now: https://formsupreme.webflow.io/

I really appreciate your expertise and help

vincent · December 8, 2018, 4:28pm

That should be simple and straight forward.

So, here, no need for Grid.

You can achieve this using either Column elements or Flexbox. As you’re not using the Container and Webflow’s grid, let’s say Flexbox.

1 section for the top part, with 2 divs inside, one set to 60% with, the other 40% width and a padding of 40 on top bottom left and right. The section is flexbox horizontal.

1 section for the bottom part, with 4 divs inside, all sharing a “cell” class set to 25vw width and 25vw height to keep them square.

Jussi · December 8, 2018, 5:40pm

@Vincent you the man! Got most of it working except the text in the second part. Any tips how to get them match the design?

You’ve already been super helpful and I’m very grateful for that

Btw damn nice beard you are rocking!

vincent · December 10, 2018, 8:30am

Sure, can you share your read-only link please?

Lol, this is where all my CSS powers rests.

Jussi · December 9, 2018, 11:37am

Ah, here goes https://preview.webflow.com/preview/formsupreme?utm_source=formsupreme&preview=dc0fec4ce7717ef9ea45be6cea7ebd4e

vincent · December 10, 2018, 8:41am

Cool site.

Watch the video. I start by redoing the base stylng of your squares with a common class. When that’s done, when all the common properties are set, I add a combo class to the last three of them to add specific local styles such as the bg image. This way, down the road, I can modify my .cell class and it affects all the elements.

Proceed like that for everything you do in html/css.

Then I used Flexbox vertical and centered to style the cells, I’m not sure what the design reference is.

Jussi · January 14, 2019, 5:53pm

@vincent you are a god sent! I had somehow missed this video. Learning so much from you and your really appreciate the time and expertise you’ve shared with me! Thank you

Jussi · January 17, 2019, 6:09pm

Hey Vince, I’m trying to figure out how the heck to make this site work on mobile. I know things are supposed to cascade down from desktop but it’s not really working out. Been watching the videos but my daddy brain has fried the rest of the fuses

How do you do you get those blocks you helped me build (and the rest of the site) to drop down one after another? Any advice from a pro how I could figure out the mobile version based on the design attached?

Any advice is greatly appreciated

https://formsupreme.webflow.io/
https://preview.webflow.com/preview/formsupreme?utm_source=formsupreme&preview=dc0fec4ce7717ef9ea45be6cea7ebd4e

Here are the mobile designs for the front page and menu:

vincent · January 18, 2019, 1:54pm

I’d like to help but you used Grid, and that’s not a very efficient way to build your sections. Actually you don’t need grid at all, and that is making the responsive strategy more difficult.

Jussi · January 18, 2019, 3:14pm

I’m crying here. Someone else told me to absolutely use grids I really respect your point of view. How would you build the different sections on this site and what “blocks” would you use? I’ve used a bunch of div blocks but would you rather use cells inside sections to make it easier from a mobile strategy perspective?

Do you know if there are any videos made by Webflow that show how to build the site the way you would?

webdev · January 18, 2019, 5:20pm

Nelson @PixelGeek has lots of videos from screencast’s and such, where he shows different techniques to build a site like a reference example. You might consider investing time watching them.

Building websites is akin to cooking. A chef takes ingredients (css, graphics, content, design, layout) , to make a meal. The chef uses tools in his kitchen (webflow) and experience (lots of time in kitchen) to craft beautiful and delicious food. Same goes for web design. If your just looking for a delicious meal and don’t plan on cooking for a living, pay a chef. It’s faster, easier, and usually cheaper than your time wasted learning how to cook.

Jussi · January 21, 2019, 5:05am

Awesome, thanks so much for recommending me pixelgeek’s videos @webdev ! I’ll definitely put in my time into those.

That’s a great analogy and I mostly agree. Though it’s not necessarily as black and white, either other. I’ve used other html5/css based systems before on wordpress’ platform and with some paid and free help gotten proficient enough to build and maintain my own site’s. Far from perfect but good enough from usability and results driven stand point.

I work as a designer and this is a great opportunity for me to improve my understanding of development and become a better collaborator at work and I wouldn’t try to build a professional site by myself. I’ll let the pro’s like yourself do that

Thanks again for your recommendation Webdev!