4 replies [Last post]
TheCSSApprentice
TheCSSApprentice's picture
Offline
newbie
Canada
Last seen: 7 years 16 weeks ago
Canada
Timezone: GMT-4
Joined: 2013-04-15
Posts: 9
Points: 12

Can someone explain to me why there is large space at bottom and right of my mobile site: www.vizionled.com?

I cannot figure it out even with firebug.

Thanks a bunch

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure what the issue is

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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

TheCSSApprentice
TheCSSApprentice's picture
Offline
newbie
Canada
Last seen: 7 years 16 weeks ago
Canada
Timezone: GMT-4
Joined: 2013-04-15
Posts: 9
Points: 12

Hugo, I solved this one too.

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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 33 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

visibility vs display

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As Gary says normally for

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me