Large space at bottom and right of mobile site

Not sure what the issue is but if you're managing screen sizes via media queries shouldn't you be using the meta tag 'viewport' device-width initial-scale 1.0 to tell the mobile device not to adjust the site to fit to screen?

Hugo,

I solved this one too. I was using the css attribute 'visibility: hidden' to hide away some of the divs and containers which I did not want as part of the mobile version.

This seems to work well, especially when you are coding a css file associated to a site which was not 'planned' for responsive design from the get-go.

Tow other very important attributes you must add to the container though is:

width: 1px;
height: 1px;

This overrides the large screen width and height which is still applied even tough the container is no longer visible.

Do you have anything to add to this? Is my method ok to you?

Thanks!

The visibility property shows or hides the content of the element, but always preserves the space. Using {display: none;} also hides the content, and it removes the element itself.

cheers,

gary

As Gary says normally for small device widths where ones removing elements you would do so using display: none; visibility is useful but you often need to work at hiding space with zero line heights, zero font size etc etc