Support » Fixing WordPress » Display full site on mobile screen

  • Resolved katesiraj


    Hi there,
    I have a website, template is child theme of twenty twelve.
    On a computer at any width of browser, it looks fine. Content, menus etc all fixed width and don’t mess around when browser is made smaller.
    However, on a mobile, it pushes all the writing and pictures in the content section around to fit the size of the mobile screen (although the header and menu bar are still 960px width if you scroll across).
    How do I get it so that when the site is opened on a mobile phone, the user sees the whole width and height of the site (i.e. fully zoomed out) and looking like it does on a computer screen?
    Thanks so much for any help,

Viewing 10 replies - 1 through 10 (of 10 total)
  • You have made some mistakes in your css styles, rem values are important and also % values, although you have some.
    I would create child .css from scratch, start with simple things like text color but when you get to menu and body, check your child as you go which will tell you where you might have gone wrong.
    Sounds drastic but you can rename the current .css so you have a reference point for colors etc.
    Use the inspect on fire bug it will help.
    One thing I did notice you have .site-header h1 min-width: 960px;

    Don’t know if you are also aware but you have broken links in the pages.

    Oh no, really?! I though it would be just a piece of code about @viewport or something. Thanks for your feedback and also on the links. I have just moved the domain and forgot to change them – classic fail.
    Are you sure there isn’t another option?



    Forum Moderator

    Here’s the thing – twentytwelve was designed to resize on different devices. If you don’t want that, you’ll have to totally redo the CSS code… You might be better off finding a theme that does not have that functionality built-in.

    I have just validated at and there are some errors but all from the twentytwelve css file. There are 3 errors from my child css sheet, all very minor to do with hypenation. When you say mistakes, what kind of mistakes do you mean? Thanks for your input.

    Moderator Andrew Nevins


    Forum moderator

    Katesiraj, have you considered using a different theme?

    Thanks WPyogi, I’ve just seen your comment. I managed to get another website of mine to do it and it was also based on twentytwelve but wasn’t a fixed width one but one which expanded widthwise to fit the screen.
    So, I realise that there needs to be another approach. Do you think it is impossible? With one, I used an @viewport and viewport meta rule.

    Hi Andrew,
    yes, I did consider it but by that time, I had done so much work on this one that I couldn’t face doing it all over again on a new theme. Also, I looked at the themes page and found there were so many, I didn’t know which to look for! Do you have a suggestion for one that is similar to 2012 but that isn’t made to resize to different devices?
    thanks, Kate

    Yey, I worked it out. I just had to remove:
    <meta name=”viewport” content=”width=device-width” />
    from header.php and as my width are all fixed, it all works perfectly!
    Thanks for your advice guys.

    Brilliant solution, Katesiraj! Also, make sure all your custom widths are % and not px so they display properly on mobile devices. 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Display full site on mobile screen’ is closed to new replies.