You do not need to copy responsive.css into your custom CSS because it’s already being included through an external link. You’re just adding to the load time by duplicating it.
You have two problems which are keeping the site from being responsive:
1) the Google Ad plugin in the header, and
2) this custom CSS, which I assume you added for the Google Ad:
#header {
margin:0 auto;
text-align: centre;
width: 1000px;
}
Setting the width to 1000px will keep the page from resizing properly on a mobile device.
By the way, you’ll need to use the American spelling of the word center for the text-align property in order for it to work properly. Also, the very last rule in your custom CSS has an incomplete value for background-image. If you don’t fix it, then any other CSS rules after that one will not be recognized properly.
Thank you for the response!
I actually got it to work finally, but I did have to leave the responsive.css in my custom css. By removing the copied responsive.css, the entire site got completely messed up on mobile, so I left it, removed the #header css you mentioned, and it now works perfectly – on my phone at least 🙂
Thanks for your help!