WordPress.org

Forums

Magazine Basic
Disable mobile view (7 posts)

  1. yoshimitsu1234
    Member
    Posted 1 year ago #

    How do i disable mobile view of this theme? Also is there any way can add option so that users can click on option yo go to desktop view of this theme?

  2. mediaseth
    Member
    Posted 1 year ago #

    I'm also looking for a response to this question. I keep searching. Thank you.

  3. Juan M. Gonzalez
    Member
    Posted 12 months ago #

    An option to disable mobile view, that is to see the desktop version also on mobile devices (users can zoom, etc.) would be a nice feature suggestion for the theme's developer.

    For now, I did it on a test site with the following five code changes, mostly in a child theme of Magazine Basic, excepting the first one (difficult to do in the child theme). Of course, when updating the theme, child theme customizations are not affected, but the parent one must be redone with each theme update.

    1. Section commented out in style.css of the parent theme (Magazine Basic):

    /* =Media query for iPad and tablets
    -------------------------------------------------------------- */
    /*
    @media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
    	.row,#header .c12{margin-bottom:0!important}
    	.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{margin-right:0;margin-left:0;margin-bottom:20px}
    	.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12,.header-group,.header-widget{width:100%}
    	#main,.header-widget{margin-top:0}
    	.gallery-item img{width:140px}
    	#page{margin-bottom:-62px}
    	.left-sidebar #secondary,#left-nav{position:absolute;top:0;left:-260px;width:260px;padding:0}
    	#footer .icon-leaf,.header-widget.widget_search,#site-navigation,#site-sub-navigation{display:none}
    	#site-sub-navigation{border:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
    	#mobile-menu{display:block}
    	.format-status .entry-content{margin-bottom:0}
    	#footer{height:63px}
    	#footer-content span{display:block;float:none;text-align:center}
    	#footer .copyright{margin-bottom:10px}
    }
    */

    2. Style override added to child theme's brief style.css:

    /* Site's min. width of 960px instead of 320px. Max width is 1200px. */
    .grid{min-width:960px;}

    3. Line changed in child theme's complete copy of header.php:

    <meta name="viewport" content="width=960" />

    4. Bootstrap section for .offcanvas commented out in child theme's complete copy of library/js/theme.js:

    /*	Harvey.attach( 'screen and (max-width:768px)', {
          	setup: function() {
          		id.addClass( 'offcanvas' );
    	      	$( '#site-sub-navigation, #site-navigation' ).prependTo( id ).show();
    			$( '#drop-down-search, #header-widgets' ).hide();
          	},
          	on: function() {
          		id.addClass( 'offcanvas' );
    	      	$( '#site-sub-navigation, #site-navigation' ).prependTo( id );
    			$( '#header-widgets' ).hide();
    			$( '#secondary, #left-nav' ).find( '.sub-menu-parent > a' ).removeClass( 'open' );
    			$( '#secondary, #left-nav' ).find( '.sub-menu' ).hide();
          	},
          	off: function() {
          		id.removeClass( 'offcanvas' );
          		$( 'body' ).removeClass( 'left-menu-open' );
    	      	$( '#secondary, #header-widgets, #site-navigation ul ul, #site-sub-navigation ul ul' ).show();
    			$( '#site-navigation, #site-sub-navigation' ).appendTo( '#header .c12' );
    			$( '#drop-down-search' ).hide();
          	}
        } ); */

    5. And this added to child theme's brief functions.php:

    /* Replace parent theme's theme.js with child theme's theme.js, to disable the mobile menu. */
    add_action( 'wp_enqueue_scripts', 'change_theme_js' );
    function change_theme_js()
    {
        wp_dequeue_script( 'theme_js' );
        wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/library/js/theme.js', array( 'jquery' ) );
    }
  4. Juan M. Gonzalez
    Member
    Posted 12 months ago #

    I've tested this a little more, and there is a better way for the step #3, just comment out that line instead of changing it:

    3. Line commented out in child theme's complete copy of header.php:

    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->

    In this way, the steps #2 and especially #3 can be enough for mobile devices to see the full site view correctly. The other steps are also beneficial for desktop browser behavior when using small windows.

    For quick edition of these theme files (first on a test site, naturally), WordPress sites have the following:

    Dashboard > Appearance > Editor

  5. Juan M. Gonzalez
    Member
    Posted 12 months ago #

    Also is there any way can add option so that users can click on option yo go to desktop view of this theme?

    @yoshimitsu1234: That's another possibility, instead of full site view always, let the site visitors choose mobile view or full site view. This is as well a good feature suggestion for the developer of this Magazine Basic responsive theme.

    For now, until this link to full view is added to Magazine Basic, of course there are plugins that switch to a different mobile-only theme when using mobile, including a footer link to full website (in this case, to switch to Magazine Basic). For example, BuddyMobile (for BuddyPress sites), and many others.

  6. Juan M. Gonzalez
    Member
    Posted 12 months ago #

    Looking a little more at this Magazine Basic theme, and although the previous modifications work to have desktop layout on mobile, maybe this is not needed, since Magazine Basic's responsive design doesn't produce a crippled mobile site, but a mobile layout with the complete site content. That is, the mobile view is the full site as well.

    Also, even when some of us prefer to use full sites also on mobile (using zoom) just to avoid often dumbed-down mobile sites, according to polls most users think differently and prefer mobile layouts on mobile.

    Another detail, Google officialy recommends responsive design for smartphone-optimized sites.

    By the way, W3C, the international web standards organization, says: "One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using" (Mobile Web Best Practices). And Magazine Basic does just this with its responsive design.

  7. mediaseth
    Member
    Posted 10 months ago #

    I did this, and it worked. However, I have a new feature. I see the "hamburger" (lines) and search icon on the upper left of desktop view. The search actually works up there, but I'd like the "hamburger" to go away and lack the ability to do it, myself. All I did was copy/paste the changes suggested above. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.