Removing all 'Responsive' elements from Minimum Pro

[PrayersNApples]

I would like my website to show up the same on mobile devices as it does on the computer - I'd like to completely disable all 'responsive' aspects of the theme. I found a similar request here: http://www.studiopress.community/topic/how-to-disable-all-responsive-aspects-of-the-agency-child-theme/ but then I also saw another post, where the user said that it might be different from theme to theme (http://www.studiopress.community/topic/removing-responsive-from-modern-portfolio/)... I was able to do it with my previous theme, Adorable, and then I just used the WP Touch plugin - which gave me exactly the type of look I wanted.

Any help would be greatly appreciated!

http://www.prayersandapples.com

[nutsandbolts]

Remove the entire media queries section from your stylesheet, then remove this from functions.php:

/** Add Viewport meta tag for mobile browsers */
add_action( 'genesis_meta', 'child_viewport_meta_tag' );
function child_viewport_meta_tag() {
	echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

You should be good to go after that.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[PrayersNApples]

I removed the media quieries section but my functions.php doesn't have that same code. This is what it looks like:

<?php
//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );

//* Set Localization (do not remove)
load_child_theme_textdomain( 'minimum', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'minimum' ) );

//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', __( 'Minimum Pro Theme', 'minimum' ) );
define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/minimum/' );
define( 'CHILD_THEME_VERSION', '3.0' );

//* Add HTML5 markup structure
add_theme_support( 'html5' );

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

//* Enqueue scripts
add_action( 'wp_enqueue_scripts', 'minimum_enqueue_scripts' );
function minimum_enqueue_scripts() {

	wp_enqueue_script( 'minimum-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'minimum-google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Slab:300,400', array(), CHILD_THEME_VERSION );

}

//* Add new image sizes
add_image_size( 'portfolio', 540, 340, TRUE );

//* Add support for custom background
add_theme_support( 'custom-background', array( 'wp-head-callback' => '__return_false' ) );

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 320,
	'height'          => 60,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'site-tagline',
	'nav',
	'subnav',
	'home-featured',
	'site-inner',
	'footer-widgets',
	'footer'
) );

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

//* Unregister layout settings
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-content-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );

//* Unregister secondary sidebar 
unregister_sidebar( 'sidebar-alt' );

//* Create portfolio custom post type
add_action( 'init', 'minimum_portfolio_post_type' );
function minimum_portfolio_post_type() {

	register_post_type( 'portfolio',
		array(
			'labels' => array(
				'name'          => __( 'Portfolio', 'minimum' ),
				'singular_name' => __( 'Portfolio', 'minimum' ),
			),
			'exclude_from_search' => true,
			'has_archive'         => true,
			'hierarchical'        => true,
			'menu_icon'           => get_stylesheet_directory_uri() . '/images/icons/portfolio.png',
			'public'              => true,
			'rewrite'             => array( 'slug' => 'portfolio' ),
			'supports'            => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'page-attributes', 'genesis-seo' ),
		)
	);
	
}

//* Remove site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_after_header', 'genesis_do_nav', 15 );

//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 7 );

//* Reduce the secondary navigation menu to one level depth
add_filter( 'wp_nav_menu_args', 'minimum_secondary_menu_args' );
function minimum_secondary_menu_args( $args ){

	if( 'secondary' != $args['theme_location'] )
	return $args;

	$args['depth'] = 1;
	return $args;

}

//* Add the site tagline section
add_action( 'genesis_after_header', 'minimum_site_tagline' );
function minimum_site_tagline() {

	printf( '<div %s>', genesis_attr( 'site-tagline' ) );
	genesis_structural_wrap( 'site-tagline' );

		printf( '<div %s>', genesis_attr( 'site-tagline-left' ) );
		printf( '<p %s>%s</p>', genesis_attr( 'site-description' ), esc_html( get_bloginfo( 'description' ) ) );
		echo '</div>';
	
		printf( '<div %s>', genesis_attr( 'site-tagline-right' ) );
		genesis_widget_area( 'site-tagline-right' );
		echo '</div>';

	genesis_structural_wrap( 'site-tagline', 'close' );
	echo '</div>';

}

//* Modify the size of the Gravatar in the author box
add_filter( 'genesis_author_box_gravatar_size', 'minimum_author_box_gravatar' );
function minimum_author_box_gravatar( $size ) {

	return 144;

}

//* Modify the size of the Gravatar in the entry comments
add_filter( 'genesis_comment_list_args', 'minimum_comments_gravatar' );
function minimum_comments_gravatar( $args ) {

	$args['avatar_size'] = 96;
	return $args;

}

//* Change the number of portfolio items to be displayed (props Bill Erickson)
add_action( 'pre_get_posts', 'minimum_portfolio_items' );
function minimum_portfolio_items( $query ) {

	if ( $query->is_main_query() && !is_admin() && is_post_type_archive( 'portfolio' ) ) {
		$query->set( 'posts_per_page', '6' );
	}

}

//* Register widget areas
genesis_register_sidebar( array(
	'id'          => 'site-tagline-right',
	'name'        => __( 'Site Tagline Right', 'minimum' ),
	'description' => __( 'This is the site tagline right section.', 'minimum' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-featured-1',
	'name'        => __( 'Home Featured 1', 'minimum' ),
	'description' => __( 'This is the home featured 1 section.', 'minimum' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-featured-2',
	'name'        => __( 'Home Featured 2', 'minimum' ),
	'description' => __( 'This is the home featured 2 section.', 'minimum' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-featured-3',
	'name'        => __( 'Home Featured 3', 'minimum' ),
	'description' => __( 'This is the home featured 3 section.', 'minimum' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-featured-4',
	'name'        => __( 'Home Featured 4', 'minimum' ),
	'description' => __( 'This is the home featured 4 section.', 'minimum' ),
) );

So I just removed this part:

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

I only have my iPhone to check on, but it looks like it worked! 🙂 The only problem is though on the blog page (http://prayersandapples.com) the sidebar starts at the BOTTOM of the page, after all of the posts (in other words - when you're scrolling through blog posts, the sidebar is completely white and empty, then when you get to the bottom of the page where you'd expect to see the footer, all of a sudden the sidebar starts).

Also interesting: the icons in third footer area (the far right area) are positioned lower than the others on every page). It seems like something is pushing all of the far right column info down.

Here's the media queries section I deleted (Is there maybe something I need to put back in?):

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1179px) {

	.wrap {
		max-width: 960px;
	}

	.site-header .widget-area {
		width: 620px;
	}

	.content {
		width: 580px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.sidebar {
		width: 280px;
	}

}

@media only screen and (max-width: 1023px) {

	.wrap {
		max-width: 768px;
	}

	.content,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.minimum-landing .site-inner,
	.sidebar,
	.site-header .widget-area,
	.site-tagline-left,
	.site-tagline-right,
	.title-area {
		width: 100%;
	}

	.site-header {
		position: relative;
	}

	.site-inner {
		padding: 40px 5%;
		padding: 4rem 5%;
	}

	.post-type-archive-portfolio .entry,
	.site-header .title-area,
	.site-header .search-form,
	.site-header .widget-area,
	.site-tagline-left,
	.site-tagline-right {
		text-align: center;
	}

	.header-image .site-title a {
		margin: 0 auto 10px;
		margin: 0 auto 1rem;
	}

	.site-header .search-form {
		float: none;
		margin: 0 auto;
		width: 50%;
	}

	.site-description {
		font-size: 30px;
		font-size: 3rem;
	}

	.site-tagline {
		margin-top: 0;
		padding: 20px 0;
		padding: 2rem 0;
	}

	.minimum .site-tagline {
		margin-top: 400px;
		margin-top: 40rem;
	}

	.genesis-nav-menu li,
	.site-header ul.genesis-nav-menu,
	.site-tagline-left,
	.site-tagline-right {
		float: none;
	}

	.site-tagline-left p {
		margin-bottom: 20px;
		margin-bottom: 2rem;
	}

	.minimum-landing .site-inner {
		margin: 0;
		padding: 40px 40px 0;
		padding: 4rem 4rem 0;
	}
	
	.minimum-landing .site-container {
		padding: 5%;
	}

	.footer-widgets .widget,
	.nav-primary .wrap,
	.site-footer .wrap,
	.site-tagline {
		padding-left: 5%;
		padding-right: 5%;
	}

	.site-footer {
		padding: 40px 0;
		padding: 4rem 0;
	}

}

@media only screen and (max-width: 768px) {

	.site-header {
		padding-bottom: 10px;
		padding-bottom: 1rem;
	}

	.title-area {
		padding-bottom: 6px;
		padding-bottom: 0.6rem;
	}

	.minimum .site-tagline {
		margin-top: 200px;
		margin-top: 20rem;
	}

	.genesis-nav-menu a {
		padding: 20px 10px;
		padding: 2rem 1rem;
	}

	.site-footer .nav-secondary a {
		margin: 0 10px;
		margin: 0 1rem;
	}

	.responsive-menu {
		display: none;
	}

	#responsive-menu-icon {
		display: block;
	}

	.home-featured .simple-social-icons ul li a {
		font-size: 36px !important;
		font-size: 3.6rem !important;
		padding: 20px !important;
		padding: 2rem !important;
	}

	.genesis-grid-even,
	.genesis-grid-odd,
	.post-type-archive-portfolio .entry {
		width: 100%;
	}

	.post-type-archive-portfolio .entry:nth-of-type(2n),
	.post-type-archive-portfolio .entry:nth-of-type(2n+1) {
		float: none;
		padding: 0;
	}

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

}

@media only screen and (max-width: 600px) {

	.home-featured-1,
	.home-featured-2,
	.home-featured-3,
	.home-featured-4 {
		width: 50%;
	}

}

@media only screen and (max-width: 320px) {

	.header-image .site-header .title-area .site-title a {
		background-size: contain !important;
	}

}

[nutsandbolts]

Sorry about that; I forgot you were using a Pro theme.

This is what you'll remove from functions.php:

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[PrayersNApples]

No problem 🙂 Any suggestions on the right sidebar getting pushed down on the blog page? (Also the right footer icons). And I just noticed the header logo (upper left hand side) is pushed up higher than the navigation menu).

[nutsandbolts]

Your sidebar and footer icons are displaying fine for me... As is the logo. Am I missing something? It looks like the media queries are still in the stylesheet, though, since the site still resizes.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[PrayersNApples]

What kind of mobile device are you using? I'm on my iPhone 5 (that's where the sidebar, footer, etc. problems are: http://prayersandapples.com/blog). It doesn't resize for me - it looks exactly like it does on the website (which is good!!) - just seems like things are getting pushed down on the right sidebar column.

[nutsandbolts]

Okay, I see it now on my phone. I thought you meant the full sized site was acting up. That's happening because the content areas use px for width - if it's wider than the screen, things are going to get pushed down. If you calculate the percentages and change the sidebar width, content area width, etc. it shouldn't do that.

To be honest, though, I wouldn't worry too much about the experience for mobile users since their ability to read the site is severely hindered without mobile responsiveness. When I come across a site on my phone or iPad that doesn't resize for mobile, I usually don't stick around long. I'm too impatient to scroll and zoom to read the content.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[PrayersNApples]

Ok, sounds good - thank you! I'm probably going to add WPTouch, which is what I had last time - I liked the way it made things easy to read, but then users still had an option to look at the regular site if they wanted. Thanks again!! 🙂

[Author]

Posts