Streaming live at 10am (PST)

Flexbox or Grid for creating course overview


Trying to create a course overview using Flexbox and running into responsive issues. I’ve been using large margins to get the div to go left. Overall this is just responsive at all. I maybe deleted this and started over 4 times already. I’ve tried columns, flex, and grid and still get it to properly align on desktop and mobile is a complete mess. Right now, I am back to using Grid.

I am looking for suggestions or someone to see if I have something set wrong. Figma image of what I am trying to accomplish.

The page: Courses

Read Only: Webflow - Bloom | Remote Trauma Support by Chayn

Hey @tiffanylo,

IMHO, columns would be a really good choice for you. They have options to stack on top of each other in tablet and mobile views.

Start with a div block with a padding of 10px on all sides. Then from the Add menu, select columns

Once columns are added, you can restructure the way you want the columns to be displayed in Desktop mode, and from what I gather through your Figma prototype, this is what I would recommend:

I have achieved the above column settings by dragging the blue line separators

If you click on show all settings, you will see this pane on the right hand side, that allows you to make the columns responsive in tablet and mobile viewports. Currently, as you can see, only in mobile view, they are being stacked.

Hope this helps!

Hi @imtiazraqib,

Thank you for getting to me on this. Yeah, I had tried using columns. I am not sure about how to get the second green div and the list item to also be side by side as shown in my imaged shared - the second row. I’ve tried duplicating the columns and removing the text from the first part, adding the green ‘div’ and then finally the ‘list items’. Not sure if this is the correct wait.

I also notice that there is spacing happening between the elements. I have idea on how to remove it, but it only makes the design worse. Here are further screenshots.

Also here is another page of my attempt.

I really don’t understand why problem there is Grid? it can use a flexbox is column. I will training ‘Grid’! it now.

Hi @Cleison_Costa ,

Thank you for responding. I am not sure either. I may have tried to use flexbox, but have tried so many things so not sure what the result might have been.

maybe try grid
look video