openlayers padding white space

Question

I have excessive whitespace/padding in two places on two OpenLayers maps that I'd like to eliminate.

Here are the maps:

-- http://rainpursuit.org/map.htm -- http://rainpursuit.org/mobilemap.htm

The whitespace that I'd like to eliminate:

-- the padding around the map. I'd like to them to be full screen -- the unnecessarily large popup windows. The excessive whitespace isn't that big of a deal on the desktop version, but it leads to unnecessary panning in the in the mobile app each time a popup is opened.

I'm stumped here. Any help would be appreciated. Thanks

Answer 1

Reset both the default padding and margin attributes in your CSS:

html, body {
    margin: 0;
    padding: 0;
}

On the mobile version, you have in your mobile2.css:

.olControlMobileLayerSwitcher {
    background-color: #FFFFFF;
    border: 2px solid #CED6D9;
    display: none;
    height: 90%;
    left: 55%;
    margin-left: -50%;
    overflow-y: auto;
    padding-top: 25px;
    position: absolute;
    top: 1%;
    width: 90%;
}

The width:90%; and height:90%; are causing the pop-up to be larger. You can change these values to decrease the height and width of the pop-up.