Support » Theme: Singl » Not formatting on mobile correctly

  • djmwr

    (@djmwr)


    I hope someone can help me. 🙂

    My website at http://www.djmattrouse.co.uk is looking great with the Singl theme however it doesn’t seem to format properly on mobile.

    Since installing the Jetpack update I now have an ugly teal coloured bar running across the top of my mobile site, however I’ve no idea how it got there.

    Can someone help?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    It sounds like you’ve activated Jetpack’s mobile theme. You should be able to deactivate the module in your Jetpack settings – it looks like this:
    Jetpack Settings Edin 1 2 1 by Automattic WordPress

    Thread Starter djmwr

    (@djmwr)

    Thanks for the reply. 🙂

    I’ve deactivated the mobile theme in Jetpack and it’s done away with the teal banner.

    Although now, on mobile, it doesn’t seem to format properly. The menu button (the three horizontal lines) located on the black menu bar across the top aren’t visible when the page loads, you have to ‘zoom’ out to find them but this makes the white boxes that contain the posts take up only half the screen.

    I have used the below CSS to ‘lock’ the black menu bar across the top, removing this seems to fix the issue on mobile but I still want to have a locked menu bar on both desktop and mobile – is there a solution?

    #header-wrapper {
    position: fixed;
    }

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    You might need to wrap that CSS in a media query to make the header fixed on small screen sizes only, as the existing mobile styles aren’t meant to work with a fixed header.

    You’d need to experiment to see if you can find a solution for a fixed header at small screen sizes.

    Thread Starter djmwr

    (@djmwr)

    Ok, thanks for getting back to me. I will investigate media queries.

    Also, on smaller screens, the theme seems to align left – in that the white boxes containing the text fill the mobile screen and look good but then you’re able to swipe right and move across so that you can no longer see the content boxes, just the background image (the unlocked menu bar across the top also ‘stops’ inline with the content boxes).

    Is this an issue with the theme in general? And will inputting some CSS media queries solve this?

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    you’re able to swipe right and move across so that you can no longer see the content boxes, just the background image (the unlocked menu bar across the top also ‘stops’ inline with the content boxes).

    I’m not seeing that horizontal scrolling on either the Singl WordPress.com or WordPress.org demo sites on small screens:

    https://singldemo.wordpress.com/

    https://wp-themes.com/singl/

    That means it’s likely something specific to your site.

    Possible culprits:

    – have you made any edits to the theme files? If so, try installing a fresh copy of the theme.
    – try temporarily deactivating all your plugins. Does the problem persist? If the problem is gone, reactivate your plugins one-by-one, checking your site in between each, to find the conflict.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Not formatting on mobile correctly’ is closed to new replies.