Help with responsiveness

Design help General
1

Hi guys,

I need advice/help with the responsiveness of my site.

I have finally finished designing my website (almost). I’m new to Webflow, I’ve finished the visuals of the site for desktop view, I went to begin designing for mobile view but as you can see in the screenshots a huge amount of elements are missing from my viewpoint, If I can’t see them then I cant re-arrange or re-size them to make them responsive for this view.

Have I done something wrong?

Why have they disappeared?

52
522560×1518 534 KB
02
022560×1446 313 KB

https://preview.webflow.com/preview/envers-website?utm_medium=preview_link&utm_source=dashboard&utm_content=envers-website&preview=5cb67f8fad79a5eb208a31fdfce808f7&mode=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Enver_Mehmet,

That is a great question and Ive created a little video for you to review that shows exactly how to do this and a couple other little tricks too.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

3

Hi @Enver_Mehmet
It looks like @QA_Brandon already covered most of this very well. I like to recommend you to work with Webflow’s native container element - it is already responsive:

Hope it helps.

1 Like
4

Hey Brandon,

I really appreciate this video, a lot!

Looks like I still have so much to learn in Webflow :exploding_head:

Thank you for taking the time to introduce me to some tips, I just have a few questions out of pure curiosity whilst I have your attention!

I know nothing about the whole ‘wrap’ tool in webflow, is there someplace I can learn more about this?

When I design a website from scratch should I constantly be thinking about the responsiveness, flicking throughout each view to see how it looks, or can I wait till the end and adjust it from then?

Thanks again man I appreciate your time.

5

Hey man,

Thanks for the feedback, am I right in saying that if I move all my content (within each section) into a container instead of a div that it will automatically be responsive (with a few adjustments etc).

I’m new to Webflow but I think I’m right in saying that I wasted a lot of time using divblocks as a container, because I now have to re-arrange everything. I was kinda under the assumption that Divs and Containers were the same :man_facepalming:

So, the difference between a container and a div is that a container comes pre-equipped with responsiveness?

Thank you again.

6

Hi @Enver_Mehmet,

As far as building responsively, my workflow is to keep it in mind at all times. Especially on a per section or page basis. Usually I will build a section then do my trickle down responsive setup or I may way til the end and just do it all at once, per page. Depending on the length and amount of content in the page.

As for Wrapping, here is an article:
This one has to do with flexbox: Flexbox | Webflow University
this one has to do with floats: Wrap text around an image using float | Webflow University

As for your second set of questions: IMHO, I would not use the container and build your “Own” containers based on your design workflow. TBH, I have never used the container element in a project.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

7

Last question I promise!

I’m currently working on the responsiveness on my site, so I am referring to your video you sent me etc.

The layout of my website looks so different on your designer in comparison to mine, is this because I am designing on a much smaller screen?

Just confused me a little.

thanks!

8

Hi @Enver_Mehmet,

Yes, I use a defined screen width on my 34" ultra wide monitor.

So how you will see it is not how myself or other will see.

Keep in mind that it is best to create/design for screen resolutions of all sizes not just your own.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon