Support » Theme: Esplanade » Viewing on an iPad distorted

  • gwynarion


    I have been working with Esplanade for a few days now and I’ve got things looking pretty much how I want them on my computer screen, but when I preview my site on my iPad the layout gets completely messed up. The less important (though annoying) issue is the way the sidebar contents drop to the bottom of the page. The much bigger issue is that the text of the title and description stays so large relative to other elements that they greatly distort part of the custom layout that I created at the top.

    Is there a way to force the iPad view to look more like the computer view? I would rather that my site look exactly the same on both devices even if that meant that the text was quite small and had to be manually magnified on the iPad (pinch and zoom, etc.). Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Andrew Nevins


    Front-end developer

    Yeah, you’ll need to override manually a lot of the styles that set the mobile appearance.

    Create a Child Theme or use a plugin that provides Custom CSS functionality, like the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

    Go through your original stylesheet and look for all of the styles between this media query;

    @media screen and (max-width: 640px) {
     //All of the styles are between this media query here

    You need to write new styles in your Child Theme stylesheet or Custom CSS section to override the styles you found from your original stylesheet.



    Thank you for your suggestion. In the short term I’ve brute-forced this by setting a width for the body tag and a couple other little things. I’ll work on a longer term solution now that I’ve got the site usable.

    I don’t know if this is related or not, but I’m seeing something else odd when I look at the settings for this theme. On the page: Appearance > Theme Options > Layout in the section titled Layout Dimensions I don’t see anything at all. In fact, there’s a big blank space where I have to scroll down in order to see the field for Header Image Height. Is this normal? For reference, I’m using a Mac and have tried this in both Safari and Firefox.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Viewing on an iPad distorted’ is closed to new replies.