Remove header padding in Lifestyle Pro Theme

Community Forums Forums Design Tips and Tricks Remove header padding in Lifestyle Pro Theme

This topic is: not resolved

This topic contains 6 replies, has 4 voices, and was last updated by  mindyjoy 6 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #87124

    Daidri S.
    Member
    Post count: 1

    Hi,
    RE: Lifestyle Pro Theme Header

    I have added my own custom header image on my blog http://theegetawaygal.com which is using the Lifestyle Pro Theme and now need to remove the padding at the top and bottom of the image. I have already tried adding the below code to my Style Sheet just above the Media Queries but with no luck. Have I put the code in the correct place? Is the code written incorrectly? Any other suggestions I can try?

    Thanks so much for the help and suggestions!

    }

    .site-header {
    background-color: #76d2c5;
    padding: 0px;
    padding: 0rem;
    overflow: hidden;
    }

    http://theegetawaygal.com
    #87132

    eamonmoriarty
    Participant
    Post count: 212

    At line 906 0f your style.css you have:

    .header-image .site-title a {
        float: left;
        min-height: 400px;
        width: 100%;
    }

    Try changing to
    min-height: 200px;


    Eamon Moriarty
    EM Dzine

    #87229

    Daidri S.
    Member
    Post count: 1

    Hi Eamon,

    Thanks for the suggestion however that doesn’t work. It causes a larger border on the top and bottom of the image to stay the same and adds border to the sides which shifts all the content below the header to the right.

    Still looking for the fix.

    Daidri

    #87310

    asterbird
    Participant
    Post count: 101

    looks like the space on top, left, and right of your header image is coming from line 424 in your style.css. Try tweaking that.

    .site-container {
        padding: 0;
    }
    #89922

    mindyjoy
    Member
    Post count: 11

    Hi, I am having the same issue. I’ve tried many things and cannot seem to reduce the padding on top and bottom of my header when showing on a small screen. My site is http://www.budgetfairytale.com

    #90095

    asterbird
    Participant
    Post count: 101

    Hi @mindyjoy, add the following to the bottom of your stylesheet. Then you can tweak from there, or add in with your other media queries if you want:

    @media all and (max-width: 900px) and (min-width: 501px) {
    
    .header-image .site-title a {
        min-height: 140px;
    }
    .title-area {
        height: 140px;
    }
    
    }
    
    @media all and (max-width: 500px) {
    
    .header-image .site-title a {
        min-height: 100px;
    }
    .title-area {
        height: 100px;
    }
    
    }
    #90105

    mindyjoy
    Member
    Post count: 11

    @asterbird – Worked perfectly, thank you so much! I really appreciate your help.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.