Hey everybody. I am building a photo contest website, and I have the home page looking and working how I want it to in Webflow. The only problem is, when I test it out on my iPhone 6, it looks horrible!
I have double checked to see that my work was saved (it was completed last evening).
For keep your design responsive I would recommend you to use % or VW (VH) in sizes/padding/margins.
Yet be careful with interactions, when object goes to hide “behind the screen” it cause overlap and on mobile devices site will have horizontal scrolling. Many ppl using overflow=hidden option on th body.
@ilikewebdesign Yes you do have a few issues for responsive design. First as @sabanna suggested, be careful using fixed width like on your subtitle. That’s why it’s flowing off the page. I like the design but think you might have more than one responsive issue so you are probably going to need to work through each element test it responsively. Fortunately, Webflow makes that easy with the viewports.
Thanks for the input… I will be the first to say that I don’t know as much as I should about responsiveness…
I will definitely make the suggested changes; however, is there a way for me to (sort of) know that the design is going to be responsive in Webflow? Because when I adjust the viewports all the way down to the smallest smartphone in vertical on the home page, it all looks right…
Do I need to invest in a tester that would allow me to see the actual live results?
@ilikewebdesign Which part? Looks like you got the homepage sorted out? The about page focus on your “about” container. You still have it at set pixels and negative padding. You will need to adjust some CSS on each screen size.
Percentages are great but often I end up using a combination of percentages along with some pixel measurements.
Can you post some screen shots. Your homepage isn’t overflowing on my iPhone. Did you refresh? The page still needs some refining but it seems to work.