Home Forums Pro Themes Kids Education Pro Change Header Image Size

This topic contains 6 replies, has 2 voices, and was last updated by  wensolutions 1 month ago.

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

    Brenda Prentice
    Participant

    I would like the header images on pages to be long and narrow, how can I change the default size? In the “customize” section of WordPress, it states that the image needs to be 1000×750 pixels. I would like 1200×300 pixels.

    Currently, header images are very large, like this:
    Current Header Image Size

    I want the header image to be more like this size:
    Desired Sizing of Header Image

    #90848

    wensolutions
    Keymaster

    Hello,

    Can you please provide us with your site URL so that we can work on your query further ?

    Regards!!

    #90854

    Brenda Prentice
    Participant

    https://kidsrawesome.com/tp-team/anne-frank/

    also…. I would love to have four columns for #related-posts, but cannot figure out how to code that.

    #90860

    wensolutions
    Keymaster

    Hello @brenners78,

    Please add below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    @media screen and (max-width: 992px){
    #related-posts .column-wrapper {
         width: 25%;
    }
    }
    
    .single-tp-team #related-posts .blog-post-wrap {
        width: 100% !important;
    }

    Hope this helps.

    Best Regards!!

    #91013

    Brenda Prentice
    Participant

    I’m sorry. That was not what I was going for. I’m sorry if I confused you. I wish to accomplish the following:

    1) resize the header image on every page

    2) display four columns of four related posts (vs. two columns of two related posts)

    #91062

    Brenda Prentice
    Participant

    I did find the code to manipulate for the header image, page title, and breadcrumbs. Here I have it set to not display a banner image, not display page title or breadcrumbs. I also set the background color to white and set the height to 300 px to fill in the gap between the nav menu and the page body.

    #header-image {
        max-height: 95px;
        min-height: 20px;
        overflow: hidden;
        background-color: #fff;
    }
    
    .has-banner-image#header-image {
    	min-height: 20px;
    }
    
    #header-image img {
        width: 100%;
        vertical-align: middle;
    }
    #header-image.no-banner-image {
        min-height: 300px;
        max-height: 300px;
    }
    
    .page-title .entry-title {
        display: none;
    }
    #breadcrumb-list a {
        display: none;
    }	
    #91066

    wensolutions
    Keymaster

    Hello @brenners78

    Hope the solution is working well.

    If you have any further query/confusion, kindly let us know.

    Regards!!

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

You must be logged in to reply to this topic.