Streaming live at 10am (PST)

Help with responsivity http://famooz.webflow.io/


#1

Hey guyz,

I have some problems with responsivity on many devices (tablet, phone etc...) Could you please tell how you see the website http://famooz.webflow.io/ in your devices? Does it appears OK to you? I think that the desktop version is OK.

In mobile devices, I had noticed some weird stuttering after scrolling up and down. Page will "jump" a few pixels and i don't know why. Tested on latest Chrome for android. I think that this problem should be fixed with deleting 100% min width parameter in page sections but I want to have sections set to full screen on mobile devices (when you press any button in navbar, you should see child section of the website with 100% width on your display). Hard to describe.

Any idea how to fix this annoying stuttering when scrolling up / down? Thanks for helping me.

Any other advices concerning of responsivity will be appreciated :slightly_smiling: thank you.


#2

I'm not experiencing any stuttering or responsibility issues on phone & Chrome.

Did you notice any responsibility issues yourself that you could point us to?

Thanks!


#3

I didn't see any problems...


#4

Thank you for Your time guyz. I set the min-width to fixed pixels and not it appears almost OK. Could you test it with any tablet devices with chrome / mozilla please?

Do you have any guidance for better responsivity? Navbar is not finished yet, I really have to redesign it in something "more comfortable" in mobile devices.

Thank you.


#5

I would fix the Navbar logo, it seems very stretched out on my monitor.


#6

I am having the same issue with everything im going. I have a resolution on my chromebook of 1366x768 so everything im building looks fine on my computer and some other computers. Once, however, they pass a certain breakpoint they start looking weird, sections are overlapping and or hidden. I dont understand how to fix this issue within the webflow editor.


#7

To fix all my problems with measurements I have started to use VH, VW, and EM measurements only on all of my websites.


#8

You might want to create your own thread to help with your issues. I also suggest watching a bunch of the videos over at http://help.webflow.com/courses especially the full website design ones. There is a lot of work that goes into making it look good on all devices, it's unfortunately not automatic.


#9

Finally, I fixed many responsivity issues. Now it looks kinda better on mobile devices. Page will now scaling properly in any device (i hope so). However, screenfly looks good now :slightly_smiling:

Last thing i need to ask you for help guyz are css transitions. Is it somehow possible to turn them off on mobile devices? I want my css effects working on PC but not on mobile devices. How can i disable it? @VLADinSACRAMENTO any advice dude? Thank you.

Thank you for your advices, i figured out that the main problem with responsivity is using PX values instead of % values. @picsles I Think this will be your problem too. Try to use % values in Width and Height instead of using fixed pixel values.


#10

So far as I know you can't decide on what devices to turn on/off interactions in the Webflow Developer tool. Although one way around this is you can Copy all your Section [assuming you have Sections or Divs or Containers making up the site] and all the content inside of them (If you have content inside of the Section all you need to do is copy and paste the Section and the Section will have all your content in it copied as well). Once you have two of everything on your site [assuming your site is broken up in sections], you can then select the first copy of the Section and make it only visible on Desktop [this is done in the Settings tab]. You can then select your 2nd copy of your Section and make it visible on only iPad, and iPhone [also done in the Settings tab]. Be sure to add all your interactions to the Section that will show up in the Desktop version though do not add any interactions to the tablet, smartphone version. Hope this helps, be sure to ask questions if you need help. :grinning:


#11

By CSS transitions do you mean the hover/active transitions or interactions? CSS transitions generally require a hover element which is not present on touch devices so it usually is a non issue. Interactions, however, at this point cannot be disabled on mobile devices but Vlad's advice above is a solid workaround.


#12

Hi @DFink, yea I meant interactions. I have to thank @VLADinSACRAMENTO for his advice, seems like it will work. Code will be a bit longer and not so good and transparent, but yes, this will work fine :slightly_smiling:

By the way, is there any chance any kind of "button" for enabling / disabling interactions on mobile devices will be added to Webflow designer sometime in future? I think feature like this will be appreciated by many ppl in community :slightly_smiling:

Thanks for your time guyz.


#13

This should be added to the Webflow Wishlist! :grinning:

By the way, is there any chance any kind of "button" for enabling / disabling interactions on mobile devices will be added to Webflow designer sometime in future? I think feature like this will be appreciated by many ppl in community


#14

A media query specific interaction feature has been discussed on the forums and it has been hinted that it will come in the future.


#15