[unseenmars]

Hi,

I just found out the header of my site in mobile device is not responsive (it only show the “zoom-in” of the top-left of the image). However, when I tried to scale the browser into mobile size on a computer, it worked just fine.

The link of the site: http://www.butihaveseentheearth.com/farmdesign/ (Hope you can check that)

Thank you very much and I am looking forward to your reply.

Best,
Kai

[Skandha]

@unseenmars: The image seems to be showing up fine on android phone and the issue seems to be only on iPhones. I will look into the issue and get back to you soon.

Kind Regards,
Skandha

[Skandha]

@unseenmars: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media handheld, only screen and (max-width: 668px) {
    #fullpage .section.custom-header { 
     	background-attachment: scroll;
    }
}

Let me know if this solves the issue on mobile phones.
Kind Regards,
Skandha

[unseenmars]

@Skandha:

Thank you for your reply. That worked only on the header; however, in the section underneath, they remained the same issue.

[Skandha]

@unseenmars: Can you let me know on which section the issue is persisting?

Also I put the same header image from your site on my local environment and the image seems to be showing up fine on mobile(iPhone5) without having to add the above CSS Code. Here you can check out the screenshot:
https://www.dropbox.com/s/l6ncnvfujdv7z8f/46837102_533403827132200_8928832400989880320_n.jpg?dl=0

Kind Regards,
Skandha

[unseenmars]

@skandha:
Header works fine. “Promotion headline”(the second section with a short description and background with three people) and two “Recent Posts” (two sections with titles “Gallery” and “Contact”) still have problem.

Thank you very much for the reply.

[Skandha]

@unseenmars: You seem to have created a different site for mobile phones. Is your issue resolved?

Kind Regards,
Skandha

[Skandha]

@unseenmars: Replace the above CSS Code by the following.

@media handheld, only screen and (max-width: 668px) {
    #fullpage .section{ 
     	background-attachment: scroll;
    }
}

This should solve the issues on mobile phones.
Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts