Rough Pixels

This is what creates that space:

#content {
    margin: calc(3rem + 2vw) 0;
}

You can copy that and paste it in the CSS tab, but adjust the values to be smaller. This does the top and bottom margins of your content area. Try making the 3rem as 2rem and then the 2vw as 1vw and see if that works better.

Thanks for the new posting!

To remove (hide) all “page” titles throughout the site, you can do this:

.page .entry-title {
display: none;
}

If you want even blog posts as well (basically all page/post titles), you can do this:

.entry-title {
display: none;
}

I’m wondering if I should add a theme option (setting) to disable page/post titles…every once and a while, I get requests for that. Doesn’t matter what theme.

Needing only two pages is good (less work). But the full-width template is just the main content that is full width–without a left or right sidebar.

Was this what you were wanting?

By the way, I’m in BC, so it was nice to see a site about it!

Thank you very much for that glowing review and rating! Greatly appreciated 🙂

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.

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? 🙂

No worries. Anyway, I have a possible solution for you, but it’s not perfect because of how that page is structured. But this might be something you can try by copying and pasting it into the Customizer’s Additional CSS tab:

.home .cover-header.bg-image {
    background-attachment: fixed;
    height: 100vh;
}

A person will still be able to scroll down the page, but when they first arrive on that page (or return to the page), the image and CTA will be full window view, right to the browser bottom edge. This will also happen in the mobile mode too (or should).

If you want to also hide the lower page elements, the title, and any content stuff there, you can also add this to the Additional CSS tab too:

.home #post-inner {
    display: none;
}

The footer will still be seen, though, when scrolling down.

Side Note: The class .home that you see in the code snippets will only apply these styles to the home page.