Mobile Header Images Not Responsive


I have been trying to optimise the header image of the front page and for the normal pages on mobile. When browsing my website on some mobile devices (i.e. iPhone) the images are not responsive.

I saw on a forum that you were suggesting the use of the code below, but didn´t help.

@media only screen and (max-width: 480px){
#header .bottom-header h2 { font-size: 30px; line-height: 1.2; }
.top-header img { width: 200px; }
#header .bottom-header { padding-top: 50px; padding-bottom: 50px; }

Could you help me with this issue, please? (I attached one image)


Hello @lauyfer,

I see the images just alright on the mobile layout, can you please point me to the exact location of the screenshot for more investigations?

Can you also share the operating system and the browser version, please?

Looking forward to it.


HI Ion Rutz,

Thanks for your prompt reply.

The screenshot comes from an iPhone 5s, operating system iOS 10.1.1 and the browser is Safari. The image is from the homepage.

Attached you can find other screenshots one from the homepage and the other from the URL

Both from an iPhone 6, iOs 10 and Safari.

I look forward hearing from you.

Kind regards

Hi Ion Rutz,

I haven’t heard about you.

I would really appreciate if you can help me with this issue.

Kind regards,

Hello @lauyfer,

Sorry for the tardiness of my reply, but this issue is still in development and I cannot provide you a temporary fix for it.

The best we can do is to wait a new theme upgrade that will most definitely get all this sorted alright.

Please excuse the inconvenience!


Hi Ion,

Thanks for your reply.

Do you have a projected date for the update?

I will like to finish this project, but I don’t want to change the theme as I really like it.

Thanks for your time.

Best regards,

this seems to have worked for me. I looked up the pixel width for iPhones which is 1242px and replaced the 768 and 1024px I had seen suggested a few times here with it

@media only screen and (max-width: 1242px) {
	#header {
		background-attachment: initial !important;

Hi @pmazey,

Yes, this was the solution.

Thank you,