Please help me with responsive design. I am finding this impossible

Please can someone help, i have gone through countless tutorials, i have watched loads of youtube videos, I have tried to copy templates, but whatever i do, nothing seems to work, i am trying to make a hero section responsive. This is a template i am using but its not responsive, this is an unedited template from webflow.

I am pulling out my hair here, nothing seems to be working and i am starting to wonder if its somthing to do with my monitor or somthing? I have litterally tried every variation, flex boxes, grids, colums, changideg the vh, vw, % - everthing. I feel totally stupid. I posted this before and got no help, please can someone explain to me why a pre made template that is supposed to be responsive nt working when you get to mobile size.

I would really appreciate the help.

Here is my site Read-Only:https://preview.webflow.com/preview/root-173c20?utm_medium=preview_link&utm_source=designer&utm_content=root-173c20&preview=17a78d95419636bf202360064f08dda6&mode=preview
([how to share your site Read-Only link][2])

Hi @Made_Easy,

Your read-only link isn’t working :slightly_frowning_face:
Can you re-share?

Hi sorry about that,

https://preview.webflow.com/preview/make-a-hero-section-responive?utm_medium=preview_link&utm_source=designer&utm_content=make-a-hero-section-responive&preview=29f24baa5488f1aa973f256abf1be297&mode=preview

I am going for a full width hero like my 4th and 5th attempt. im gettting closer but im just not grasping this. I have read about flexbox but i think im getting to confused with all the options.

Thank you very much for your help

Hi

Try to use Grid as un the attached video :slight_smile:
https://www.loom.com/share/736ff2ad7e744969ba674fad461e54dd

1 Like

Thank you so much for this, i am nearly there :-), but when i get dow to mobile i cant find a way to stack them?

https://preview.webflow.com/preview/make-a-hero-section-responive?utm_medium=preview_link&utm_source=designer&utm_content=make-a-hero-section-responive&preview=4f662a5a0fac0f2a6dbedde5143dab76&mode=preview

I made this video that hopefully will explain:

Using the different breakpoints, you can set different positioning properties for your elements. So in this example, I removed a column in exchange for an extra row while in the mobile view, which allowed for stacking.

2 Likes

Works a charm :-), both of you, thankyou very much. I think i will practice this and use for all my hero sections.

Is this the best way to do it?
I noticed that finsweet uses all divs, his way works great as well but quite hard to follow. For xample, the way he has done it on this site.

https://webflow.com/website/Translate-Webflow-Website

Thank you so much for this man!