WordPress.org

Forums

Twenty Eleven
Different page templates behaving differently in mobile devices- Twenty Eleven (6 posts)

  1. plana_design
    Member
    Posted 1 year ago #

    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;
    }
  2. Andrew
    Forum moderator
    Posted 1 year ago #

    Looks like its coming from the padding on this:

    #supplementary
  3. plana_design
    Member
    Posted 1 year ago #

    Thanks so much for your reply - I removed the left-right padding on the supplementary which I didn't need, but this did not do the trick. The second pages (check the 'history' link) are still wider on mobile devices.

    mendocinowoodlands.org/mwca

  4. Andrew
    Forum moderator
    Posted 1 year ago #

    What about removing the padding on this too:

    .hentry
  5. Michael
    Forum Moderator
    Posted 1 year ago #

    (I have nothing added or mofified to media queries at this point)

    the @media queries define the behavior in mobile devices, so you will most likely need to create those for your 'secondary' pages as well.

    more important, the linked page has serious validation errors:
    http://validator.w3.org/check?uri=http%3A%2F%2Fmendocinowoodlands.org%2Fmwca%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    particular those with 'End tag aside seen, but there were open elements.' and 'Unclosed element div.'

    try to fix them first, before trying to fix the CSS;
    http://codex.wordpress.org/Validating_a_Website

  6. plana_design
    Member
    Posted 1 year ago #

    Thanks again -

    I have fixed most of the errors, still trying to figure out where to go to fix the end tags. Several errors have to do with a plug-in I have installed, I may have to find a new one.

    I have tried everything I know in the media query, all to no avail. So I took everything out I'd put in, since it wasn't working.

    Taking padding out of .hentry didn't work either, but thanks!!!!!

    I am still at a loss....

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic