Responsive Grid Design - Two problems!

Publishing help Editor
1

Hi All,

I am a designer that is looking to start building websites, so I am very new to webflow and development in general.

I keep getting stuck on my responsive Grid Design. I know what I want to achieve (shown below), but I can’t get webflow to listen to me.

Firstly, as I work between break points, my images are resizing and rendering wrong. I am inserting a div block into the grid, and inserting the asset into that. Is that incorrect? Is it better to edit attributes in the div block, or the image?

Secondly, I need to reorder the grid items between displays, I am doing this with the ‘manual’ feature, but I am hoping there is a smarter way to achieve this?

Example
Example1920×774 93.4 KB

Here is my preview: https://preview.webflow.com/preview/mokapot-v4?utm_medium=preview_link&utm_source=designer&utm_content=mokapot-v4&preview=f9126280f9f5fa8e1ee29e522c5ccc36&workflow=preview

Thank you all,

  • Radek
2

Hey Radek,

If you’re wanting to position things manually then yes manual is exactly the right way to go. Particularly since you are changing column spans in your grid layout for that center/top item.

Grids are incredibly powerful, I recommend you start here;

And then there is a ton of content online.

https://www.google.com/search?q=webflow+css+grids

3

Thank you Michael, I have been wrestling this for a few days now but have succeeded with the desktop version. I’ll get onto tablet and keep reading through all the webflow resources, thank you!