Home › Forums › Pro Themes › Kids Education Pro › Change Header Image Size

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 12, 2019 at 9:45 pm #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

    February 12, 2019 at 10:22 pm #90848
    wensolutions
    Keymaster

    Hello,

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

    Regards!!

    February 12, 2019 at 11:09 pm #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.

    February 12, 2019 at 11:48 pm #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!!

    February 14, 2019 at 7:00 am #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)

    February 14, 2019 at 7:38 pm #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;
}
    February 14, 2019 at 10:23 pm #91066
    wensolutions
    Keymaster

    Hello @brenners78

    Hope the solution is working well.

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

    Regards!!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.