Support » Theme: Kale » reduce the size of the banner / cover image?

  • Hi – Wondering if there is a way to reduce the display size of the header/cover image? I’d like it to be vertically smaller — and am assuming I’d have to upload one with different proportions, but am not sure how to change the size that shows. Thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi mashupmom.

    Thank you for contacting us and for using our theme. We appreciate it.

    The original size of that image is 1200x550px, as the notice in Appearance -> Customize -> Header Image states.

    You can upload an image that is shorter vertically, like 450px or even shorter and add this to Appearance -> Customize -> Additional CSS:

    .frontpage-banner > img {
    	height: 450px;
    	width: 100%;

    Adjust 450px to the height of the image you’re going to use.

    Hope this helps but if you have any additional question, feel free to ask.

    Kind regards.

    Thread Starter mashupmom


    Thanks — I tried doing this by uploading an image that was proportional to the original header but smaller, but it seemed to stretch the banner to the width of the page and distort.

    Then I tried uploading one that was 400×1200 and it looked great on desktop, but on mobile distorted into a weird square shape?

    You’re welcome.

    If you’re happy with the appearance on a desktop please apply it and let me know when in place so I could see how does it look on mobile and come up with some CSS that would make it look good there too.

    Kind regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘reduce the size of the banner / cover image?’ is closed to new replies.