Streaming live at 10am (PST)

What's going on with responsiveness of my site?!?!?


#1

Problems with Responsiveness

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).

Can anyone spot the problem? Thanks in advance!

Here is the preview:
https://preview.webflow.com/preview/watchingmagnoliablossom?preview=50a403adbb2f7058aeee0dfe79c7eac7

Here is the live site:
http://watchingmagnoliablossom.webflow.io/


#2

Hello @ilikewebdesign

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.


#3

@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. smile


#4

Here is very good explanation about responsive and adaptive design principles

Hope it will help


#5

Thanks for the input... I will be the first to say that I don't know as much as I should about responsiveness.... smile

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?


#6

I think I made the problematic items percentage-based, like ya'll suggested. It still overflows though... I even turned off my interactions.

Any more suggestions?


#7

Are you sure you publish site after you add changes?


#8

@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.


#9

@jdesign, I did make some changes to the home page (haven't got to the other pages yet...)

But when I pull up the live published site on my iPhone, the changes I made seem to make no difference....


#10

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.


#11

What do you know! I rebooted my phone (I do work in IT, so I thought I would try it...) and my site looks like it is working!

Before, the footer appeared to be 3x the bottom length of the screen, causing overflow on the right side.

Thanks for the help! I've still got several more pages to go, so I'll probably be back!


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.