[RodeBoy]

Google Search Console has just identified ‘New Mobile Usability issues detected for site https://www.mattfurness.co.uk/’

I can only think it relates to the background image. It displays fine on my laptop but when viewed on my iphone I just get a plain black background which I believe is taken from the left half portion of the image. This suggests to me that this is what Search Console is detecting.

Any thoughts? Is this a general issue with the Rock Star Pro theme?

Many thanks, Chris

[Skandha]

@rodeboy: Can you send me a screenshot of the Google Search Console test?
To adjust the background image in mobile view properly
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

body.custom-background {
	background-position:center center;
}

Let me know if this helps you out!
Kind Regards,
Skandha

[RodeBoy]

Thanks Skandha. I just realised that in settings for the background image I had image positioning as <= rather than centre. So I have corrected this and at this stage have not added your CSS coding as this doesn’t seem to make any difference. How does it appear for you? Should I still add the code?

I’m very sorry I didn’t put the full report in the original message. It states “Content wider than screen” and “Clickable elements too close together”. Both relate to the home page. I think I have resolved the latter as there were a couple of links in the footer which were close … unless you can see something else.

Interestingly if I run the page through their mobility test it passes without issues.

I look forward to hearing from you with interest!

[RodeBoy]

Hello again, I have just received the same message for my http://www.drumteacher.co.uk site which is built in the same way. My background image is 1920 x 1080 which I believe is the recommended size.

I am beginning to think that there might be a small issue with the responsive nature of the theme, but I welcome your comments and will be happy to be proved wrong!

Thanks for your time, Chris

[Skandha]

@rodeboy: This is not because of responsiveness of the theme. This is due to the background image having a visible picture on the right side rather that center. So on mobile devices or smaller screens the visible picture is going out the screen on the right.
To solve this,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:1000px) {
	body.custom-background {
		background-position:75% 50%;	
	}
}

Let me know if this works out!
Kind Regards,
Skandha

[RodeBoy]

Brilliant! I’m glad it’s not the theme, and have inserted the CSS coding. I have also asked Google to validate the changes and will keep you informed.

Thanks again

[Skandha]

@rodeboy: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/rock-star/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

Kind Regards,
Skandha

[RodeBoy]

I had already left a review a year ago but have now updated it to include your recent support. Thanks Skandha

[Skandha]

@rodeboy: Thank you for your appreciation. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts