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.

@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:

#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

Try this: go to ATO->Add HTML/CSS Inserts->CSS Inserts and find the lines:

@media only screen and (max-width:500px) {
 
}

and chang it to

@media only screen and (max-width:500px) {
body {background-color: #AEB49B;}
}

That black you are seeing is the page background color - which in your case is black

Thanks, juggledad.

This works to an extent, but as shown in the two attachments, this solution doesn't quite work with the "box-shadow: 0 0 110px #9CA28B inset" setting I have on #bodyrow, or with the different background colours on different pages. The problem seems to be created by the margin setting in this expression:

td#right {
    border: 2px solid #494745 !important;
    margin: -50px 15px 15px !important;
    padding: 25px 5%;
}

Frankly, I could probably ditch the inset shadow command without people seeing much difference, and then it would be quite straight-forward to set a different background colour for different pages. This would make your suggestion work seamlessly.

What I'll try first is to re-write the content of the widget in td#right.

Thanks, Paul

The reason for the apparent difference in the color is because on the body row you are using a box shadow, that modifies the color of that element by just a little

.page-id-8 #bodyrow, .page-id-50 #bodyrow, .page-id-39 #bodyrow, .page-id-279 #bodyrow, .page-id-12 #bodyrow {

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

}

Looking at your CSS Inserts - oh boy...to speak frankly, it is a mess. You have rules that aren't attached to a selector (See end of the file) selectors with no rules, and lots and lots of rules with invalid settings. (just run it thru https://jigsaw.w3.org/css-validator/ to see)

It's like you have built a balancing house of sticks and keep adding something in to try to fix something else, but that intern creates another issue.

Yeah, it is a bit messy , but it seems to hold up ok. Whilst the buck stops with me, using a 13 year old computer doesn't make life easier. This theme, being of similar vintage, is mercifully about the only thing that still works correctly.

Those unused rules and selectors are mostly for content that I haven't added to the website yet.

Try this, where I said change to this:
@media only screen and (max-width:500px) {
body {background-color: #AEB49B;}
}
change the color to #a7ac94 instead and see if that works