Twenty Eleven child theme on mobiles

  • Hi,

    I am rather new to wordpress, html and css. I’ve been puting together a site for my brother.
    The site displays as I would like on a pc based browser. However when viewed on a smartphone it does not display nicely at all.

    The header image and menu do not span across most of the page like they do on the pc browser.
    The as the menu beneath the header image is reduced in size the text links on the menu are all over the top of each other making navigation impossible.

    The facebook like box also doesn’t show up on the mobile

    One of the problems I think is that the mailing list text input box overlaps (contact form 7 widget) the side widget area. The width of this is controlled by
    adding a width to the stylesheet css .sidebarInput { width: 250px; }

    How could I change this so that it is a percentage of the sidebar width rather than a fixed width? – I think that would help

    Any advice or suggestions would be greatly appreciated.

    The site is https://www.richardtrethewey.co.uk/

    Many Thanks

    Robert

Viewing 7 replies - 1 through 7 (of 7 total)

  • Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    Thread Starter RobertTreth

    (@roberttreth)

    Sorry I wasn’t clear, I meant to write I’d created a child theme which I’m using based on the twenty eleven theme.

    The Child Theme is the one i’m currently running, that I have modified.

    What happens if you use the unedited parent theme?

    Thread Starter RobertTreth

    (@roberttreth)

    When I switch back to the parent theme the menu is still piled up with the links all over the place. It could be an issue with my phone I suppose?

    the sidebar isn’t set up in the twenty eleven theme for static pages, so none of the widgets show up.

    The parent Twenty Eleven theme is designed to be responsive to smaller screens but it could be that your particular phone screen size is a little different from (say) the iPhone. You could try adjusting some of the CSS widths in your child theme but I have to warn you that this sort of juggling act can be a nightmare.

    the sidebar isn’t set up in the twenty eleven theme for static pages

    You can add the sidebar to page.php in your child theme.

    Thread Starter RobertTreth

    (@roberttreth)

    Ok thanks I’ll have a play around with some of the widths in CSS.

    I’ve already added the sidebar in the child theme for static pages.

    Will try and borrow someone elses phone to see what the site looks like to see if its the same issue.

    thanks

    Thread Starter RobertTreth

    (@roberttreth)

    Right I’ve sorted the added some lines to the CSS stylesheet I found on the forums which makes the browser adjust nicely to different sized screens. I no longer have the issue with the header image and menu.

    The contact form widget width is still throwing up some problems. At the moment it is controlled by this line in the CSS:

    sidebarInput { width: 250px; }

    I think it means that its always 250px irrelevant of the size of the browser screen. So on a mobile this is far too big.

    Is there a way I can control it so that the width is defined as a percentage of the width of the sidebar. So that it automatically shrinks with the rest of the sidebar?

    I’ve searched through, but so far haven’t been able to find an answer.

    Any help would be great, thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Twenty Eleven child theme on mobiles’ is closed to new replies.