Support » Fixing WordPress » How to make Twentyten theme responsive

  • Resolved ArtistScope

    (@artistscope)


    I have used the Twentyten theme on our website for some time now and only recently discovered that it was NOT mobile friendly, not even the latest version (2.9).

    I think that the main reason that it is not mobile friendly is that the header image governs the width of the page and that image does not resize. I have tried a few CSS hacks to make it resizable to screen width but they didn’t work.

    Google is now penalising sites that are not Anroid friendly, so a fix for Twentyten is surely needed. Otherwise what use will it have? Sure, I could use another theme but none are suitable for the look that I want.

    In style.css:

    
    /* This is the custom header image */
    #branding img {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	display: block;
    	float: left;
    	width: 100%;
    	height: auto;
    }
    

    This and @media, etc did not work. Recommendations please?

Viewing 3 replies - 1 through 3 (of 3 total)
  • staartmees

    (@staartmees)

    Making a theme responsive is not as easy as it looks. Also a certain moment in time, the Twenty Ten theme will reach its EOL. Best is to search for a more recent and responsive theme e.g. https://wordpress.org/themes/twentytwelve/

    ArtistScope

    (@artistscope)

    Thanks

    I’ve just gone through this. Just in case anyone wants to do this in the future –

    1. Make a child theme based on twenty ten
    2. Add the following css to the child theme css
    3. Copy header.php from twentyten to the child
    4. Make one change in header.php to the header image as below (around line 105)

    add to child theme style.css

    
    *{
    	box-sizing: border-box !important;
    }
    #access,
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #wrapper {
    	width:100% !important;
    	max-width:940px;
    }
    #branding img{
    	width:100% !important;
    }
    #site-title{
    	width:70% !important;
    }
    #site-description{
    	width:30% !important;
    }
    #content{
    	margin-right: 30% !important;
    }
    #primary{
    	width:25% !important;
    }
    
    @media (max-width:899px){
    	#primary{
    		float:none !important;
    		width:100% !important;
    		border-top: 1px solid #e7e7e7;
    		margin-top:24px;
    		padding-top:24px;
    	}
    	#primary .widget-container{
    		max-width:480px;
    	}
    	#content{
    		margin-right: 20px !important;
    	}
    }
    
    

    Change this line in child theme header.php
    <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="" />
    to this
    <img src="<?php header_image(); ?>" width="100%" alt="" />

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.