Support » Themes and Templates » [Theme: Twenty Twelve] Removing fit-to-screen functionality

  • Hi there!

    My question is quite simple, I hope the answer is too. 🙂 I am using the Twenty Twelve theme on my WordPress installation, but when I visit my website on my phone, it automaticaly resizes the theme to fit it into the screen. I know how awesome this functionality is, but I would like to remove it. So, my question is basically: how do I remove this function from the Twenty Twelve theme, so that I can see the ‘normal’ version of the theme when I visit my website on my mobile device?

    Hope you guys can help me out with this.


Viewing 12 replies - 1 through 12 (of 12 total)
  • Qasim


    Hi svscherpenseel,

    I’m also trying to achieve this. Did you get anywhere with this?




    Hi Qasim,

    I have still no luck achieving this, unfortunately. I hope anyone can help us out.

    Moderator Andrew Nevins


    Front-end developer

    Don’t use Twenty Twelve if you don’t want a mobile-compliant theme.



    Font hero

    It’s near impossible.

    TwentyTwelve does not only has a so called responsive layout, it’s also build on the mobile first principle, so if you want to change it to be a fixed width layout, it’s the same thing as rebuilding the CSS from the ground up.

    That amount of work is not worth doing, it’s far better to use a fixed width layout one like Twentyten.



    That’s too bad, since I already build a theme which is based on Twenty Twelve. I’ll take a look at the CSS and see what I can do. I’ll post the CSS file if I can figure it out.

    Thanks for the replies guys. 🙂

    @svscherpenseel agreed! At the very least it would be awesome to be able to temporarily disable it so that one can find a prettier solution. 🙂

    Please let us know if you find anything!

    Here is the solution:

    /* =Media queries
    -------------------------------------------------------------- */
    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 50px) {

    Just change the minimum width to 50px. Only people viewing your website on their Tamagatchis will notice, 😉

    It triggers the jquery mobile functions with the @media screen inquiries. Interesting.

    This worked for me, take a look.

    I commented this out in the header file of my child theme and it magically worked:

    <!--meta name="viewport" content="width=device-width" /-->

    Keep in mind, I had developed the twentytwelve child theme with fixed widths so it all magically appears like the desktop site on tablets and phones now that I have commented that out.

    I put backticks on that code don’t know why it didn’t show up as code, sorry



    Font hero

    Try this, not widely tested though.

    1. Copy over the whole block of this section from parent and put into child stylesheet just below @import line as usual.

      @media screen and (min-width: 600px) {
      	/* everything here as is */

    2. Change (min-width: 600px) to (min-width: 300px)
    3. Inside it, change max-width to just width on .site


    Thank You So Much for your Help! It works! I been looking for this solution for almost 3 months now. Thank you and I found your answer.

    God Bless!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Theme: Twenty Twelve] Removing fit-to-screen functionality’ is closed to new replies.