• GoDaddy Community
  • Website Design & Development
  • Website Design & Development

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution
    New

    Adjust height of header in All Colors theme

    I would like to reduce the size of the header of my site, https://parentingaces.com. I recently changed to the All Colors theme. When I use the Customize feature, it looks like I want it. However, when I look at the actual site in my browser, it is still much larger than I want. Please advise.

    2 ACCEPTED SOLUTIONS
    Super User II

    @LisaGS

     

    In looking at the image -- it isn't the right size for that space.  That's why it is blurry.  In looking at the code the size should be 1903 x 500 -- the one in place is 1000 x 449. 

     

    Uploading a smaller version doesn't display smaller, it just stretches to meet the size designated in the theme files.  In the same vein, uploading an image that is too large just wastes resources and slows down your site (more on that later).  That's why you always want to know the size needed and upload that exact size.

     

    I'm not familiar with that particular theme, but the developer should provide to you the specific image size necessary for that space so that you can upload an image that fits and looks good.  Same for featured images and other spaces.  Premium themes provides these specifics.

     

    However, to change the header size, you would need to change this portion of the CSS and then paste it into Appearance > Customize > Additional CSS:

     

     

    .header-image {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 500px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;

     

     

    We don't want to change the width so that we remain responsive.  I would look at changing the height from 500 to whatever you want and uploading an image in that exact size (1903 x 250 for example).  Then be sure to click PUBLISH.  After making that change clear any caches (website, browser) that may prevent you from seeing the change.

     

    Also, your site is sludge slow -- something is not right for it to take 81 seconds to load.  Google wants 2-3 seconds.

     

    parentingacestennis.png

     

     

     

    You can run your own test at gtmetrix.com to get the details needed to correct the above.  HTH! 

     

    Judith
    "Be a voice. Not an echo." ~ Anon

    View solution in original post

    @LisaGS   Appearance > Customize > Additional CSS

    View solution in original post

    5 REPLIES 5
    Super User II

    @LisaGS

     

    In looking at the image -- it isn't the right size for that space.  That's why it is blurry.  In looking at the code the size should be 1903 x 500 -- the one in place is 1000 x 449. 

     

    Uploading a smaller version doesn't display smaller, it just stretches to meet the size designated in the theme files.  In the same vein, uploading an image that is too large just wastes resources and slows down your site (more on that later).  That's why you always want to know the size needed and upload that exact size.

     

    I'm not familiar with that particular theme, but the developer should provide to you the specific image size necessary for that space so that you can upload an image that fits and looks good.  Same for featured images and other spaces.  Premium themes provides these specifics.

     

    However, to change the header size, you would need to change this portion of the CSS and then paste it into Appearance > Customize > Additional CSS:

     

     

    .header-image {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 500px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;

     

     

    We don't want to change the width so that we remain responsive.  I would look at changing the height from 500 to whatever you want and uploading an image in that exact size (1903 x 250 for example).  Then be sure to click PUBLISH.  After making that change clear any caches (website, browser) that may prevent you from seeing the change.

     

    Also, your site is sludge slow -- something is not right for it to take 81 seconds to load.  Google wants 2-3 seconds.

     

    parentingacestennis.png

     

     

     

    You can run your own test at gtmetrix.com to get the details needed to correct the above.  HTH! 

     

    Judith
    "Be a voice. Not an echo." ~ Anon

    View solution in original post

    Thank you so much @Muse! I tried adjusting the css but the header is still showing way larger than I want. Any other suggestions? As for how slow the site is loading, I'm at a loss on how to fix it. Happy to accept any ideas on that as well!  🙂

    Super User III

    You could adjust the CSS of the theme.  In this example the first rule is for the space around the text of each button (padding-top + height of text + padding-bottom = height of button), the second rule reduces the space above the logo so it fits in a smaller bar.

     

    #primary-menu li a {
        padding: 15px;
    }
    .header-right {
        padding-top: 2px;
    }

     

    @Nate, thank you and where would I put that css? 

    @LisaGS   Appearance > Customize > Additional CSS

    View solution in original post