WordPress.org

Support

Support » Themes and Templates » Twenty Eleven » Different page templates behaving differently in mobile devices- Twenty Eleven

Different page templates behaving differently in mobile devices- Twenty Eleven

  • In my child theme I have a home page using 3 sidebars. I have used the sidebar-page.php template for this page. I have added an extra sidebar in the sidebar.php page (registered in functions.php) The home page looks great in mobile devices (full page showing). For my secondary pages I want only a left sidebar. I have created a page template ‘sidebar-page-1.php that call sidebar-1.php. Sidebar-1.php contains only one sidebar. In the CSS I have created #primary-2, #content-2, and #secondary-2 to style the secondary pages. The problem is that while all pages look great on a computer screen, the secondary pages are larger in mobile devices, running off to the right side of the screen.
    Any help is so appreciated!

    The site is mendocinowoodlands.org/mwca.

    My CSS for the 2 sets of page structure:
    (I have nothing added or mofified to media queries at this point)

    #page {
    margin: 0 auto;
    	width: 1000px;
    
    }
    #primary {
    	float: left;
    	margin: 0 -26.4% 0 0;
    	width: 100%;
    	background-color:#F0e0c1;
    	background-image:url(http://mendocinowoodlands.org/mwca/wp-content/uploads/content-back.jpg);
    	background-repeat:repeat-y;
    }
    #content {
    	font-family:'Giovanni-Book';
    	font-weight:normal;
    	font-style:normal;
    	font-size:15px;
    	line-height:20px;
    	margin: 0 22.7% 0 15%;
    	width: 62.25%;
    
    }
    #extra-sidebar {
    	float: right;
    	margin:0;
    	padding:30px 15px;
    	width: 19.8%;
    	}
    #secondary {
    	position:relative;
        float: left;
        width: 13.5%;
        margin:0 0 0 -73.6%;
    	padding:40px 0 0 15px;
    	background-color:#bfbe9f;
    	background-image:url(http://mendocinowoodlands.org/mwca/wp-content/uploads/sidebar-img.jpg);
    	background-repeat:no-repeat;
    }
    
    #primary-2 {
    float: left;
    	margin: 0 -26.4% 0 0;
    	width: 100%;
    	background-color:#F0e0c1;
    	background-image:url(http://mendocinowoodlands.org/mwca/wp-content/uploads/content-back.jpg);
    	background-repeat:repeat-y;
    }
    
    #content-2 {
    	font-family:'Giovanni-Book';
    	font-weight:normal;
    	font-style:normal;
    	font-size:15px;
    	line-height:20px;
    	margin: 0 22.7% 0 15%;
    	width: 62.25%;
    
    }
    
    #secondary-2 {
    	position:relative;
        float: left;
        width: 13.5%;
        margin:0 0 0 -73.6%;
    	padding:40px 0 0 15px;
    	background-color:#bfbe9f;
    	background-image:url(http://mendocinowoodlands.org/mwca/wp-content/uploads/sidebar-img.jpg);
    	background-repeat:no-repeat;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Different page templates behaving differently in mobile devices- Twenty Eleven’ is closed to new replies.
Skip to toolbar