WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Remove the responsive code from the Twenty Tewlve Theme (25 posts)

  1. johnirsk8r
    Member
    Posted 1 year ago #

    How can i remove the responsive code so my whole site displays normally on a phone. Instead of it messing up do to it trying to fit on screen.
    In other words how do i make the twenty twelve theme non responsive

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    You may want a different theme. Twenty Twelve was built to work on mobile phones first before desktops. This means you can't simply remove media queries from the CSS because website's layout will disappear. You have to create your own desktop-only CSS rules, for a lot of elements.

  3. johnirsk8r
    Member
    Posted 1 year ago #

    so there is no way to do this

  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    No, there is a way. You have to create your own desktop-only CSS rules for a lot of elements.

  5. Phil
    Member
    Posted 1 year ago #

    I just did this yesterday. It's very tricky. You have to remove the media queries section in the CSS, edit the header.php and functions file. There's also a navigation.php file that needs to be left out when the theme loads. I now have it non-responsive though so it is doable.

  6. johnirsk8r
    Member
    Posted 1 year ago #

    could you please tell me what you did to the funtions file header.php and how can i leave out the navigation.php

  7. Phil
    Member
    Posted 1 year ago #

    Removing the navigation.js file is done in functions, look for:

    /*
    * Adds JavaScript for handling the navigation menu hide-and-show behavior.
    */
    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

    Either remove this or comment it out. This stops the mobile nav kicking in when on mobile device.

    Header.php:
    I removed the mobile meta tag:

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

    I also removed the mobile code where the html for the menu was, leaving just this:

    <nav  class="main-navigation" role="navigation">
    	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    CSS was all that remained, so near the end where the media queries are, you want to change it to always show the full size:

    @media screen and (min-width: 10px) {
    
    .site {
    margin: 0 auto;
    width: 980px !important;
    overflow: hidden;
    }

    There may be a few more minor edits, but I think that's most. Worth a try and see how it is after you've done those, but my TwentyTwelve now is non-responsive and looks on mobile the same as desktop.

    Hope this helps.

    Phil

  8. johnirsk8r
    Member
    Posted 1 year ago #

    ok thnx a lot ill try it out

  9. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Make modifications in a Child Theme environment.

  10. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    @Phil: Please do not encourage people to edit the Twenty Twelve theme directly. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. All customisations should be made via a create a child theme or a custom CSS plugin.

  11. johnirsk8r
    Member
    Posted 1 year ago #

    only problem is the nav went away after the code change ?

    <nav  class="main-navigation" role="navigation">
    	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your posted code may now have been permanently damaged/corrupted by the forum's parser.]

  12. Phil
    Member
    Posted 1 year ago #

    Of course child themes are best practice - as well as making backups of everything should things go wrong - as they often do.

  13. johnirsk8r
    Member
    Posted 1 year ago #

    and esmi i made a copy of the twenty twelve theme so im not editing it directly.

  14. Phil
    Member
    Posted 1 year ago #

    @john

    try adding this to bottom of CSS:

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    display: inline-block !important;
    }

    If I remember, it adds display 'none' so you need to overwrite.

  15. johnirsk8r
    Member
    Posted 1 year ago #

    yea it shows but the old css isnt working for it. and can some one tell me why the sidebar isnt displaying right now.
    http://tshirthideout.com

  16. johnirsk8r
    Member
    Posted 1 year ago #

    i mean the sidebar is broke on this page
    https://tshirthideout.com/hello-world/

  17. Phil
    Member
    Posted 1 year ago #

    You've removed some CSS for 'site-content' and specifically a

    float: left;

  18. johnirsk8r
    Member
    Posted 1 year ago #

    thank you that fixed it. i forgot i removed that when messing with figuring out how to remove the responsive design. now if i can figure out why the menu isnt using the css like it did before ill be golden

  19. phil
    Member
    Posted 1 year ago #

    @esme and @Phil...just a note that WordPress.Org included me in an email on this topic because @Phil, you and I evidently get the same notification search results on any posts where our shared name is in a reply (albeit yours is used with an upper case "P". Aside: @Phil, how come I wonder that you ended up with the same WordPress member name as me? I suppose the engine that verifies member name changes does not look at case?

    For the record, I concur with both of you, in that child themes are best practice, and making a backup first of whatever you are editing. And I definitely try to use the custom CSS plugins first before ever messing with an original theme.

  20. johnirsk8r
    Member
    Posted 1 year ago #

    i fixed the nav menu thnx for the help phil im going toss a donation your way.

  21. urbannerd
    Member
    Posted 1 year ago #

    yes!!! this just worked for me too!

  22. badbanana
    Member
    Posted 7 months ago #

    Yep - worked for me too!

  23. urbannerd
    Member
    Posted 6 months ago #

    does this no longer work for twenty twelve?
    i tried this again for a newer site im working on
    and it does not work.

    site is thepreciselife.com

    i also tried deleting from

    /* =Media queries-------------------------------------------------------------- */
    to
    /* =Print

  24. Rajesh Khatri
    Member
    Posted 6 months ago #

    Forget everything do as below:

    OPEN style.css and find below line:

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

    and change it to

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

    and add the following rule to the bottom of the css :

    #page {
    width:1000px; /*or whatever width you want the site to be*/
    }

  25. esmi
    Theme Diva & Forum Moderator
    Posted 6 months ago #

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

Topic Closed

This topic has been closed to new replies.

About this Topic