Streaming live at 10am (PST)

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:

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.

Thank you so much for this man!