I’m having trouble figuring out why my responsive site becomes non-responsive once I publish it and view on mobile devices. (Apple & Android) When I toggle between the various views on both desktop and mobile preview, the site appears to work fine. However, as soon as I publish the site and view it on mobile it looks completely wrong. The weird thing is when I view it on my desktop and manually minimized the window it works fine…it’s just not working on mobile. (IOS, Android)
I’ve posted a link below if anyone could help I would greatly appreciate it! https://preview.webflow.com/preview/movingforward?preview=61c8346094e4a01835e5c05e52e0b701
Hello @domo, Thank you very much for the post, the first thing I would check is your body style, the height on that is currently set to 25%, so this may be causing issues. I would change this to 100%, republish and then check again. If the issues continue to persist then you can go to the next element in the site and see how that is styled
I hope this helps. If not, please let me know – I’m happy to assist further!
I forgot I had changed the body style. lol I switched it back to 100%, however, after republishing I’m still experiencing the same issue. You suggested in your last comment looking at the next element to correct the issue. Would this be the Header Navbar, then Section Hero? If so, could you suggest what in the element I should look at first?
Also, (for my understanding) if it’s displaying correctly in the mobile preview, shouldn’t it display correctly once published? I thought the mobile preview reflects what a live site would look like?
Hey Guihnz, Sure it’s http://movingforward.webflow.io/ The site is responsive when I minimize the window on my desktop horizontally (right to left), but not vertically. I get overlapping of text and images. I built this site exactly the same way as the Space Template by 6ixStudio. Theirs is responsive, so I’m not sure what I’m doing wrong.
It is all fine with the “responsibility” of your website.
The problem is there are a few things blocking the natural flow it should have to fit every element nicely on small screens. I could find a few issues:
Height of Sections. It seems you have set the height of the sections in %. Try to remove it, i.e. leave it Auto for all screens.
Padding X Margin. Example you have set a negative margin to the element “No obligation required” at the same time most elements before them have a lot of Margin or Padding. Try to decrease the margin and padding from this other elements and remove the negative margin from it. Although it is not wrong to use negative margin and Paddling I believe it is not necessary in your case.
It seems this same element “No obligation…” is in the wrong section in some cases, for instance in the Contact Section. It is the first element you’d like to show in your Contact Section (as per your desktop view) but you placed it on the section above “how we can help”. Again, it is not “forbidden” to do that, but it gets challenging to make it work on all devices.
Size of fonts on Small screen. You might want to decrease the fonts size of a few elements. It will help to fit all together on mobile.
I’d suggest you to watch more videos from Webflow Tutorials http://tutorials.webflow.com/. It seems you are not totally familiar with a few HTML and CSS concepts yet. (tip from a totally dev newbie that have learnt a lot through this videos).
