Mobile site is not displaying as it should

[jpenns]

pachurch.ca

Compare to desktop site. It isn’t full width, there’s a weird border around it, and the headlines are not where they should be.

[ruenel]

Hello @jpenns,

Thanks for writing in!

We cannot replicate the issue. This is what we are seeing and no sign of the weird border as you say.

Can you please send us a screenshot so that we will have an idea of your issue?

Thank you.

[jpenns]

This is on iPhone. https://www.dropbox.com/s/zj1bg1deal3lc22/IMG-9371.PNG?dl=0

[jpenns]

There are two images there… horizontal and vertical. For some reason it shows one as a link and one as an image.

[nabeel]

Hey @jpenns,

Thank you for providing the screenshots. You can fix the background image issue by adding the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .x-section.bg-image.parallax, 
    .x-section.bg-pattern.parallax {
        background-size: cover !important;
    }
}

To remove the spacing between the buttons in your first section you need to remove the line elements. I cannot see any border or headlines issue perhaps it was because of the background image issue. Adding the above code might fix this as well.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Let us know how this goes!