Streaming live at 10am (PST)

Tablet and Mobile Layout Issues


#1

Hi All,

I'm currently in the process of building my first Webflow site and am having difficulty with the mobile and tablet layouts

Whilst both layouts appear to work when viewed in the designer and on desktop browsers, when viewing the site on a mobile or tablet (I've tried both IOS and Android) I end up with a band of grey down the right hand side of the page with no content in, below is a link to the site

http://westcode.webflow.io/

It's very much a work in progress (only the homepage is anywhere close to finish) so please excuse any errors, but any help would be hugely appreciated

Thanks
Gary


#2

It looks like you're using fixed widths for your layout. This will cause added space on your website at various screen sizes.

Try using responsive units like % or vw in your width settings.

If you post your read only link the community can give you a more detailed answer.

Here how.
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance! :slightly_smiling:


#3

Hi Alex

Thank you for the quick reply, please see the link below

https://preview.webflow.com/preview/westcode?preview=5e3b0063355e69862c65332cc9bedff4

Thanks again
Gary


#4

I looks like there are fade in interaction that move elements of screen but don't set them to display none. This is causing some of the size issues.

Trying adding display none to the initial appearance of your interactions. Add display block to your scroll interaction.


#5

Hi Alex

Thanks for the information, I have had a go, but unfortunately now the animated elements never appear

I've set the initial appearance to display none and display block with a scroll trigger, but nothing seems to appear when scrolling up and down the page, the content is just missing on both mobile and desktop layouts, so clearly I've got something wrong, but I'm clueless as to what. I initially wondered if it was related to the opacity settings I'd previously used, but I've removed these and still nothing appears

I've taken the interactions off most elements just to keep it easy to work with, it's now used on the 'Westcode Incorporated' which should appear at the top of the page

Thanks so much for your help so far, I'd really appreciate if you're able to take another look

Best regards
Gary


#6

Hi Alex

Thank you for your help, I've found a fix by setting the overflow to hidden

Thanks again


#7

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