How can I reposition a block to look good on mobile and desktop?

Design help General
1

Hi there, generally I’ve been able to create basic elements using sections and div blocks on Webflow, but I’m having trouble on the one attached. It seems different div blocks need to be added in a way to change the positioning and cascading in a correct way.

Here’s what I need it to look like:

Screen Shot 2020-11-30 at 11.04.55 PM
Screen Shot 2020-11-30 at 11.04.55 PM850×222 18.7 KB

Screen Shot 2020-11-30 at 11.08.38 PM

Please let me know how I can replicate the design and include the instructions.

Thank you!

Here is my site Read-Only: LINK

2

Hi

I would use Grid. If you have no idea about this feature, go the Webflow university and watch some tutorials :slight_smile:

3

Hi @shokoaviv just rewatched the video and attempted to make the changes using a grid.

I’m not sure how to:

  1. remove the space below name div block on desktop
  2. reposition the grid on mobile in the way I’m looking for
  3. my star image has an abnormal spacing on top and below. I can only think of adding margin to the image to even out the spacing even with flex center applied. Do you have a better approach?

Thank you

4

Hi is anyone able to help? I appreciate it if so :pray:

5

Also, what do I need to change so the frame doesn’t stretch when adding more “Thank you for the help” under name? Ideally I’ll keep it the same position as is. Thanks!

6

Hi

Start your project and share your read only link (how to) I’m sure You’ll get help :slight_smile:

7

@shokoaviv my read only link was shared in the original post

8

Hi

Thank You for sharing :webflow_heart:

Here is A tiny video to show how to use Grid in your case. Hope it helps
https://www.loom.com/share/daa6255f88274daa8dc9881bca335d3f

9

@shokoaviv can you share how I can keep the same proportions in my design regardless of how much text is inside the “thank you for your help” text block?

Here’s a video of what I mean: Width issue I'm having

10

Use Grid. Your new BFF :webflow_heart: