WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Remove the responsive code from the Twenty Tewlve Theme

[Resolved] Remove the responsive code from the Twenty Tewlve Theme

  • 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

Viewing 15 replies - 1 through 15 (of 24 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    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.

    so there is no way to do this

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    Phil

    @owendevelopment

    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.

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

    Phil

    @owendevelopment

    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

    ok thnx a lot ill try it out

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Make modifications in a Child Theme environment.

    esmi

    @esmi

    Forum Moderator

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

    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.]

    Phil

    @owendevelopment

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

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

    Phil

    @owendevelopment

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

    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

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

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘[Resolved] Remove the responsive code from the Twenty Tewlve Theme’ is closed to new replies.
Skip to toolbar