Mobile friendly mode - black space added

Paul Gingell · #1 Jan 13, 2019, 09:05 AM

My site is cumbria-stone-walling.co.uk.

I've used juggledad's responsive solution to reposition the right sidebar, plus a host of other @media instructions. So far I've only finished coding for small screens in portrait mode, but the plan is to have code for a range of sizes in both portrait and landscape mode.

Code:

@media only screen and (max-width: 700px) and (orientation: portrait) { }
@media only screen and (max-width: 800px) and (min-width: 701px) { }
@media only screen and (max-width: 960px) and (orientation: landscape) { }

Problem
I've got a black bar which appears on my iPhone4s between the footer and the bottom of the responsively repositioned sidebar (see attachment). That shouldn't be there. In addition, I'd like to add some space below the box which reads "Contact..." (which is td#right), so that it looks like attachment 2 - which I made up in photoshop.

The green background is given by:

Code:

#bodyrow {
    -moz-box-shadow: 0 0 110px #9CA28B inset;
    background-color: #AEB49B;
}

As things are, td#right seems to be stuck to the bottom of td#middle or #bodyrow, and adding margin-bottom to create that space doesn't seem to work.

Any suggestions gratefully received.

Paul