Twenty Twelve
Twenty Twelve how to unify mobile look? (7 posts)

  1. Tomas Mackevicius
    Posted 3 years ago #

    Hello, I'm trying to make Twenty Twelve look the same or at least similar on mobile crome and mobile fire fox.

    It looks that browser interpret media queries differently. Perhaps you already got some good results with CSS?

    I'm attaching screen shots taken with Nexus 7 tablet:

    Firefox: http://i.imgur.com/CA5Im5X.png

    Google chrome: http://i.imgur.com/a0ePOzW.png

    Personally I like Fire Fox look much better.

    Screen shots taken from vanilla Twenty Twelve: http://twentytwelvedemo.wordpress.com/

  2. Tomas Mackevicius
    Posted 3 years ago #

    At this moment it looks that desktop mode of Chrome responds to media queries, when resizing the browser window, but mobile chrome doesn't respond when I change @media screen and (min-width: 600px) value.


  3. Tomas Mackevicius
    Posted 3 years ago #

    In case someone will be looking to solve similar problem here is what I found. If you want FF look the same as Chrome (that means ignoring media queries and showing full menu), you have to change viewport meta in the header.php:

    meta name="viewport" content="width=device-width"

    change to exact viewport width. Select width that you need:

    meta name="viewport" content="640"

    If you want Chrome look like FireFox (show mobile menu button) and in this case I'm optimizing my site for larger display of Nexus 7 - you will have to change the media query from 600 to 810 in style.css:

    @media screen and (min-width: 810px)

    But if you are using child theme, for that to work, you will also have to change it in the style.css of the parent theme - Twenty Twelve. Same thing:

    @media screen and (min-width: 810px)

    It's apparent that FF and Chrome Mobile treats media queries in a different manner and there is no clean way how to deal with it.

    I'm not marking this thread as solved, because someone might find better way.

  4. Li-An
    Posted 3 years ago #

    Hello, I'm posting here a message as comment is impossible on your site http://mtomas.com/about-me (Spam Free is blocking comments)... And it's impossible to dowload your theme ???

  5. Tomas Mackevicius
    Posted 3 years ago #

    Hi, Li-An,

    I updated the download button at: http://mtomas.com/1/tiny-forge-wordpress-theme-for-learning-and-site-building

    It's still not in the WP.org repository, because I decided to change many things for v1.2. Mainly it will be related to the fact that it's going to be parent theme. Otherwise most of the code will be the same.

    It will be interesting to hear your comments and suggestions.

  6. Li-An
    Posted 3 years ago #

    Well, I have no project for the moment for your theme but I like very much Twenty Twelve so I think I will find something to do with you theme. I planned to make a new personal theme based on yours - I need a responsive theme - but it will need too much work so I think I will buy one :-(

  7. Li-An
    Posted 3 years ago #

    Impossible to post comment on your site...

    There is no example of images inserted in post - or galleries - in the site. Are they well managed ? (floating left and right, caption...)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic