Support » Themes and Templates » [Theme: Twenty Eleven] Help? Not Mobile Friendly!

  • Resolved Harquin

    (@harquin)


    Hi all,

    The twenty eleven theme is responsive, and works great when re-sizing a browser window, however it looks awful when viewed with a mobile (currently viewing with an iPhone5)

    The website is http://www.thetweseldown.co.uk

    Can anyone provide any help with regards to making this nicer? I’ve tried the WPTouch plugin but that is just awful!

    Any help is appreciated 🙂

Viewing 15 replies - 1 through 15 (of 21 total)
  • Check the demo site from wordpress.com: that works fine!

    Do you work with a child theme? Have you made any changes to the template files?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It may be worth checking the WordPress.org Twenty Eleven demo website instead of the WordPress.com, in case there are differences.

    Harquin

    (@harquin)

    Hi all, thanks for the replies.

    It does work fine on the demo site, unfortunately though I took this website over from someone previous, and so have no idea what to change to try and make this work in a mobile version.

    No use of child themes either I’m afraid!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Check if a plugin is causing the issue by deactivating them.

    Harquin

    (@harquin)

    It’s not the plugins :-/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you take a screenshot & highlight what doesn’t work with what you want to happen?

    Harquin

    (@harquin)

    The screenshot is here:
    http://imgur.com/JbuLjR5

    As you can see, it looks awful. I want the actual content centered in the page when viewing on a mobile. Does that make sense?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your footer is causing the large width problem:

    <div style="text-align: left; width:500px; float:left"

    Remove its width style (inline CSS).

    Harquin

    (@harquin)

    Hi Andrew,

    You are incredible! I would have taken me days to search through to that!

    Thank you so much!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Regarding the menu try adding this CSS:

    #access ul {
     display: table;
     margin: 0 auto;
     background: inherit;
    }

    Harquin

    (@harquin)

    Sorted – I was just looking at a fix for that too 🙂

    The ‘Gallery’ page and ‘Eat with us’ pages still display weirdly.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can see that the Gallery page is wide because of a video.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your Eat With Us page has an image with “width” and “height” styles;

    <img alt="" class="alignright size-medium wp-image-79" height="225" src="http://www.thetweseldown.co.uk/wp-content/uploads/DSCF0243-300x225.jpg" style="width: 353px; height: 242px" title="The Barn" width="300">

    Remove them.

    Style them with CSS if necessary, but don’t use pixels. Use something like percentages.

    Harquin

    (@harquin)

    I’m having a blank, I cannot find where to edit the code :/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Check the posts/pages in the dashboard.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘[Theme: Twenty Eleven] Help? Not Mobile Friendly!’ is closed to new replies.