Not mobile responsive

Hmm on my mobile it looks different then on the desktop so I don’t know if this will work..

But I would try to go to your style.css go to rule 383 and add this:

body.custom-background {background-size:100%;}

Thank you for the quick response. I added that line of code and although it has made the background picture fit (thank you!) there is a huge grey box beneath it now!

I have another question if that’s ok – the Big Title is parallax when viewed on a desktop but not on a mobile. I’ve seen other websites present as parallax on mobiles; any idea how I can fix this on mine?

Try this for the grey area:

On rule 382 below:
@media screen and (max-width: 600px) {

Add:

.header-content-wrap { padding-bottom:0px; padding-top: 0%;}
.rb_logo { padding-bottom: 0px;}
.navbar-brand {padding: 7px 0px;}
img.rb_logo {    display: none;}
.buttons {margin-top:56px;}

With the code above – I removed the big title on the mobile version.

I am not sure if I understand you right, you want the big title on the mobile version of the smaller version besides the menu without the big title?

Thank you that helped alot! I really appreciate it.

What I meant by my second question was that the theme has a parallax big title section, so when viewed on a desktop, the big title “floats” over the background picture as you scroll. I’ve seen other websites still do this when viewed on a mobile; however does not.

I am willing to give up on that though as a much bigger problem is that in some of my menu pages are half the width of the phone screen! Any idea how I could fix this?

Does this help for your problem:

Again below:
@media screen and (max-width: 600px) {
Add:

section.adamrob_parallax {background-size: 100%!important;height: 156px!important;background-position: 0% 12%!important;}
.adamrob_pcontainer {height: 156px!important;}
.parallax-window-container {height: 156px!important;}
td.parallax-header {font-size: 52%!important;padding: 0px!important;}
.content-left-wrap {padding-top: 10px;}

Sorry still don’t get the parallax big title section…Maybe I have been to long behind the computer haha ??

You are so kind, thank you for your time!

The page is now the full width of the screen (yay!) but the background image is zoomed in alot… do you know how I can make it smaller?

Helloo!

Do you mean on the desktop version?

Nice art by the way ??

Thank you Anna! I can’t wait until I have this website finished and I can get back to painting! I meant on the mobile version, although I worked that out thankfully and they’re a normal size now. My mobile version looks so different from the desktop.

In the mobile version, on my “Etsy” page the text is very narrow – would you know how I can increase the width? Further down that page however the shop items ( in the “listings-container”) are too wide and are cut off the screen!

On my “blog” page, I have the same problem of the text box being too narrow as well as a huge gap between the header and the text!

I have made so many attempts but can’t seem to fix these problems, would you be able to help?

If you add this in the same place:

div#content .container {padding-left:0px; padding-right:0px;}
article.hentry {padding:8px}
.content-left-wrap {    padding-top: 10px;}

Will that help on the narrow and header part?

The part from etsy – that is a difficult one because it is in a iframe..
Can you change the code in in etsy?

I see this one: <div style=”width: 760px;” id=”listing-container”>
I think the 760px is causing the break down..

You have helped me immensely – I didn’t receive a notification to say you’d replied, I wish I’d seen that earlier. I’ve resolved to hide the etsy link all together!

I’d be really grateful if you could help me with one more thing – although it is quite a small issue. On the mobile version of my site when I click the drop down menu a white box appears in the background (I think this may be the ‘our focus’ box which I elected not to use? But that is a total guess) – How would I remove this?

Hmm a white box? On which pages do you have the issue?

Or do you mean the grey bit on the bottom of the menu if it opens?

Yes the grey bit on the bottom of the menu when it opens! I think it’s white but the transparency of the menu changes it to grey. It’s not there when the menu closes..

Yes the grey bit on the bottom of the menu when it opens! I think it’s white but the transparency of the menu changes it to grey. It’s not there when the menu closes..

Hmm that is a difficult one…
To show the header image – it has a padding-bottom:180px;
But if the menu drops down it pushes every thing down – so then I think the padding causes the grey area..

If you remove the padding there is still a grey area…….

The way I would do it is:

Again below:
@media screen and (max-width: 600px) {

body.home .header-content-wrap {padding-bottom:0px;}
body.home #main-nav, #main-nav.fixed { background-color: rgb(54, 54, 54);}
body.home body.custom-background {    background-position: 0% 16%!important}

That is for the home page. It is not the perfect solution, but it looks better then with the grey area..

Unfortunately it didn’t work! Thank you for your help though and taking the time to do that!