• kittel

    (@kittel)


    Hi, new to CSS. Is it possible to have my normal text header and a small picture on the right, that then goes underneath in the mobile version or is this difficult? https://www.kittel.co.uk

Viewing 4 replies - 1 through 4 (of 4 total)
  • Install a Custom CSS plugin.
    https://www.ads-software.com/plugins/search.php?q=custom+css

    Upload a 72×72 image, and get the image url to use in code below.

    This code is for logo to the left of site title and description

    /* ===== begin logo ===== */
    
    .site-header h1 a:before {
    	content: "";
    	display: block; width: 48px; height: 48px;
    	margin: 0 auto 12px;
    	background-image: url("https://dummyimage.com/72x72/ff0000/ffffff.png");
    	background-size: cover;
    }
    .site-header h1 { margin-bottom: 0; }
    
    @media screen and (min-width: 600px) {
    	.site-header h1 a:before {
    		width: 72px; height: 72px;
    		position: absolute; top: 0; left: -96px;
    	}
    	.site-title, .site-description { position: relative; margin-left: 96px; }
    }
    
    /* ===== end logo ===== */

    This is for logo image to the right (what asked for in the OP)

    /* ===== begin logo ===== */
    
    .site-header h1 a:after {
    	content: "";
    	display: block; width: 48px; height: 48px;
    	margin: 24px auto 16px;
    	background-image: url("https://dummyimage.com/72x72/d2e6f2/ffffff.png");
    	background-size: cover;
    }
    .site-header h1 { margin-bottom: 0; }
    
    @media screen and (min-width: 600px) {
    	.site-header h1 a:after {
    		width: 72px; height: 72px; display: inline-block;
    		position: absolute; margin: 6px 0 0 24px;
    	}
    	.site-title, .site-description { position: relative; }
    	.site-description { display: inline-block; }
    }
    
    /* ===== end logo ===== */

    Just FYI, it’s better to post a support question about Twentytwelve theme in its own sub forum (you could go there from theme’s main page actually)
    https://www.ads-software.com/support/theme/twentytwelve

    Thread Starter kittel

    (@kittel)

    Hi Paul, thanks a lot for this help. Have experimented a bit, but could not get to grips with how to right align the picture with the site-description (h2) and the right hand menu. Could you help again? Many thanks. Martin

    For second block of code above:

    add

    right: 0;

    into it at the same line that has

    position: absolute;

    Please note that you are editing theme main stylesheet directly. It’s better to move all the modifications to Custom CSS plugin or Childtheme stylesheet now than later.

    Thread Starter kittel

    (@kittel)

    Thanks a lot, Paul. Martin

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘A small picture in my twentytwelve header’ is closed to new replies.