Homepage Not Displaying Correctly on Mobile

[morapat2014]

I have installed X theme on my site companionmemorials.com/wordpress

At present it is a 4-page site and everything looks as I expect it to look on desktop. On mobile however, the homepage is not rendered correctly. Even in Cornerstone editor, if I switch to small screen views (481PX-767PX and 480PX & SMALLER) it is not displaying correctly. All the other pages are displaying fine - it’s just the homepage.

I cannot figure out what is the matter. Can you please help?

[nico]

Hi @morapat2014,

Thanks for writing in.

Upon checking your setup, I could see that it is looking great. If I was not able to see the problem, would you mind sharing us a screenshot of the problem that you want to fix.

Thanks.

[morapat2014]

Thanks for your reply.

What I am finding is that things like margins and spacing between sections, rows and elements are not what I would like them to be. I’ve built the website using X on a desktop computer and I’ve laid it out exactly how I would like to see it appear on a desktop browser. But when displayed on a mobile device it does not look how I would like it to.

Is there some way I can decouple my desktop from my mobile versions of the site? Like, build the site for desktop and then be able to make adjustments on the mobile version without those adjustments affecting the desktop version?

[john]

Hello,

You can make these adjustments, but you`ll have CSS skills to use the Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Now, you need to combine the above Media query and our custom classes at Element > Customize tab and add your custom codes inside this media query. Follow an example:

1. I created this section and clicked on the search icon: http://prntscr.com/h7a83v
2. Now, as I said, there is the “customization” button and you need to click it and fill the Class field like here: http://prntscr.com/h7a8m1
3. Now, you will add the custom CSS like this:

    .YourCustomClass {
        padding: 30px;
        margin: 20px;
    }
}```

Just replace the rules inside the code.

Sincerely,
John T.