• Hi,
    I am trying to get rid of the margin at the top and bottom of the header in the child theme.
    Howevere the website dose not reflect that.
    Memastudio.ca
    here is my style sheet:

    /*
    Theme Name: Child of Twenty Twelve
    Theme URI:
    Description: Cool child theme based on 2012
    Author: Mahsa
    Template: twentytwelve
    Version: 1.1.1
    */

    @import url(“../twentytwelve/style.css”);

    .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: 0;
    box-shadow: none;
    }
    /* Sidebar */

    .widget-area .widget p,
    .widget-area .widget li,
    .widget-area .widget .textwidget {
    font-size: 15px;
    font-size: 1.07571429rem;

    .widget-area .widget a:hover {
    color: rgb(247, 16, 16);
    }

    .site-header {
    padding: 0px;
    padding: 0rem;
    }

Viewing 8 replies - 1 through 8 (of 8 total)
  • You are missing a closing bracket between these two lines:

    font-size: 1.07571429rem;
    
    .widget-area .widget a:hover {

    When you have CSS issues, a good way to find errors is by using the validator:

    https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.memastudio.ca%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    (not all of those are problematic, but the last Parse error from the above renders subsequent CSS non-functional)

    Thread Starter memastudio

    (@memastudio)

    I fixed that, thanks. but it still showing the padding around the header!

    Try:

    .site-header {
        padding: 0;
    }
    
    .main-navigation {
        margin-top: 0;
    }

    Thread Starter memastudio

    (@memastudio)

    Thanks a lot, it is working! : )

    Instead of taking out Site Title and Site Description, you should leave them in place, and hide the text using minus text-indent, and style the Site Title with logo as background image.

    Also, using 960×53 site logo as it is now makes the logo become small when viewed in small screen device.

    Thread Starter memastudio

    (@memastudio)

    Thanks for your tip Paul, you are right, logo looks very small in a smaller device. I wanted to line up “mema studio” and “architecture interior design” with the navigation below it. What suggestion do you have? I am very new and not have any experience.
    thanks a lot

    General > Settings
    Make sure to put in the text for both Site Title and Description ( Tagline ).

    Template header.php
    Starting with a fresh copy of header.php from parent theme, move the whole block of code for header image up just like you did before, but this time don’t remove site title and site description.

    Appearance > Header
    Upload a logo image with real dimension, like 300×50 for example. And un-check show text option.

    Child theme stylesheet
    This below is optional adjustment, could be useful.

    /* Adjust top margin and bottom margin of .header-image if need */
    
    .header-image {
    	display: block;
    	margin: 24px auto 0;
    }
    
    .site { padding: 0 10px; }
    
    @media screen and (min-width: 400px) {
    	.site { padding: 0 24px; }
    }
    
    @media screen and (min-width: 600px) {
    	.header-image {
    		display: inline;
    		margin: 24px 0 0 0;
    	}
    }
    Thread Starter memastudio

    (@memastudio)

    Thanks A lot Paul for your precise help, I appreciate it!
    I am trying to build my website, and doing this for the first time, face lots of questions! I posted another question on how to reduce the font height again. Hopefully I get some good instructions as you provided me.
    Thanks a lot
    Cheers
    Ps; do you have a website?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Child them not updating’ is closed to new replies.