I want the banner to be narrower

Hi Sharon,

Are you referring to the image on your front page and its height?

The height is actually determined by this:

#site-branding {
    position: relative;
    z-index: 10;
    padding: calc(3rem + 12vw) 0;
}

The padding above means on mobile, go as low as 48 px in top and bottom padding, but on larger screens, go as much as 48px + the browser window’s percentage width.

Basically, to make that smaller, you can make the “12vw” part a lower number to your preference. Just add this to your Additional CSS tab in the Customizer and adjust the number:

#site-branding {
    padding: calc(3rem + 12vw) 0;
}

Also, thanks for the theme comment…is it worth 1, 2, 3, 4, or 5 stars? ??

Golly, I only understand the simplest of CSS in this case….I truly appreciate your swift reply.
I don’t understand what rem means. So if I wanted the banner to be 400px deep…would it be (3rem + 6vw) 0;
I will definitely rate this theme, it is gorgeous. And will buy the pro version if there is one for my next customer. Not being a jerk here, I just have to figure out some issues and I like to support themes that give great customer support and you seem to be it.
??

No worries ??

REM is a relative value, whereas px (pixels) is static, meaning it will always be that size, but rem is relative. Being relative means that the size will self-adjust based on the window size the page is being viewed in. This helps make the sizing responsive.

I could give you a px value height for the banner image, but it would require more modifications, but let’s try this method first…

Copy and paste this into your Additional CSS tab of the Customizer:

#site-branding {
    padding: calc(3rem + 7vw) 0;
}

The above code will still keep your banner responsive and auto-size the height based on what the person is viewing the page(s) on (desktop, phone, tablet, etc). You can still adjust that 7vw to whatever works best for you. For example, making it 6vw.

ALTERNATIVE:

If you want to make sure your banner is always 400px, you can try this code:

@media (min-width: 1200px) {
   #site-branding {
    padding: 0;
    height: 400px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

This makes the padding 0 pixels top, right, bottom, and left for the text area. Then, it will make that container always 400px in height–whether the page is being viewed on a desktop, phone, or tablet. The last few lines simply make the text stay centered and in the middle.

Try the first code option or if you want the fixed height, try the second code snippet above.

Thank you very, very much. I have given you and this theme a 5-Star review. ??

Thank you for that! ??

However, did either of the two code snippets above work out? That is the more important element ??