Streaming live at 10am (PST)

Phone is not responsive

Hello,

I am trying to get the phone version responsive, but it doesn’t work. Can somebody help me recovering it?


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

Hi @Denise, thanks for your post. Is it possible for you to help share the project read only link, here is how to Share a project’s read-only link

If you have screenshots of the trouble with the responsive layout, that will also help to provide more context to help with the styling.

Thanks in advance

Hi Dave,

I am so stuck in my design, I can’t come out, it it my first project in Webflow (and I am currently in the mood to throw my laptop out of the window ;))

https://preview.webflow.com/preview/justfit-training?utm_medium=preview_link&utm_source=dashboard&utm_content=justfit-training&preview=9ded013a5fc5522f47dfc565ecfbf492&mode=preview

I really hope you can help me out. Thanks!!

Hi Denise, I had a short look into your project. I just can say, there is no reason to throw your laptop out of the window. :wink: But there are more things to do, as I can mention here.

If you want the problems in the smaller views get solved, you should start at first to change several things in the main box model concept of desktop view, as otherwise this problems will multiply later.

  • In general I recommend a clear naming between for all elements, this makes it easier to find problems later
  • Then you should have a look at the flex box concept in the Webflow academy, as this would make positioning of elements much easier.
  • It starts in the first section with the menu and is recommendable for the following sections, also. E. g. the three columns in the intro section are better to handle with regular div elements and flexbox instead of the predefined column element.
  • Don’t use positioning settings, if not needed, I saw, e. g. a lot of relativ positioning without a need. Maybe you should have a look at the positioning basics in the academy sections, also.
  • Use better div elements and define everything by yourself, not the predefined elements like sections or containers. Set your own div section with 100% width, set it to flexbox with horizontal center and align it top, then put a div element as a container with 100% width in it and maybe a min height and set a maximum width to e. g. 1280 px, to keep it’s content in the center
  • Keep the whole thing as clean as possible, means, delete no longer needed classes
  • Avoid to many individual paddings or margins. I found a lot of them without any sense.

I prepared a short video for you where I did some minor tweaks in your project. I hope this helps a little bit.

https://cloud.pacemaster.de/drive/d/f/528338687885360334

Click at “Herunterladen” not “Öffnen” and it will download. It will need some time, as it is an MP4 file with about 140 MB.

It can help to have a look into the Webflow academy, especially here for flexbox and here for box positioning. I would focus at flexbox as technique and maybe later, if your’e more experienced at grid also.

2 Likes

Many thanks Harald! I was away for a few days! I will take a look at it tomorrow when I am at home. Much appreciated. Ik hope I will fix this, it costs me a lot of stress. Come back to you tomorrow.kind regards, Denise