[Theme: Twenty Twelve] Removing fit-to-screen functionality

Hi svscherpenseel,

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

Thanks

Hi Qasim,

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

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

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

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

@ SNOWKRASH

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!