[Theme: Twenty Twelve] Removing fit-to-screen functionality (13 posts)

  1. svscherpenseel
    Posted 3 years ago #

    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.


  2. Qasim
    Posted 3 years ago #

    Hi svscherpenseel,

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


  3. svscherpenseel
    Posted 3 years ago #

    Hi Qasim,

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

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

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

  5. paulwpxp
    Font hero
    Posted 3 years ago #

    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.

  6. svscherpenseel
    Posted 3 years ago #

    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. :)

  7. jamesinagiantpeach
    Posted 3 years ago #

    @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!

  8. jamesinagiantpeach
    Posted 3 years ago #

    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.

  9. AnneB
    Posted 3 years ago #

    This worked for me, take a look.

    Posted 3 years ago #

    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.

    Posted 3 years ago #

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

  12. paulwpxp
    Font hero
    Posted 3 years ago #

    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
  13. nefshen
    Posted 2 years ago #


    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!

Topic Closed

This topic has been closed to new replies.

About this Topic