Header 2 size

Hi there, are you talking about your custom logo you have on your site, or something else on the page you referenced?

@sacredpath —

Since @carinyawp didn’t follow up, I will!

I’m having an issue with the logo width (at the top of the page). I’d like it to marquee all the way across, edge to edge, but I can’t trick it into going any more than the 982 pixels that are “permitted” in the stock version of Button.

Here’s a link to the page I’m working on:

https://kyaoldies.net/

At the very top is the “logo” — it’s 1200 pixels wide, but it’s automatically snipped by the code to fit it in the 982 pixels allowed in Button.

Below it, beneath the menu bar, is the logo at the size we want it — but it’s in the “Header Image” position, which is NOT ideal for this purpose.

Any thoughts on how to get the logo to go “full width”?

Thank you!

DJ

Apologies for not replying, this is all brand new to me. No, nothing to do with the logo sorry, but rather I’m wanting to change the size of the paragraph headers, e.g. the What is Calmbirth?? heading. I just feel they’re way too big compared to everything else, but just can’t figure it out (link to page in initial enquiry).

Thanks so much,
Carinya

Hi @varsitysports, on Button, the outer most div in the body is #page, and it has padding to keep the content from butting up against the edges of the white area. The #masthead div, which contains the logo/header image is within that that overall #page div, so that div cannot extend outside of the #page div. We can however make it as large as possible. The logo image seems to be getting cut off on the left and right on larger screens, so in addition to making the image as large as possible, this replaces the logo image with your original image which then extends the full width of the available area. See what you think with this.

@media screen and (min-width: 40.063em) {
  .custom-logo {
    max-width: 100%;
    visibility: hidden;
  }
  .custom-logo-link {
    display: block;
    background: url('https://i2.wp.com/kyaoldies.net/wp-content/uploads/2018/04/KYA-Marquee-Logo-1200x200.png') no-repeat scroll top center / contain;
  }
}

I’ve used a Media Query for this since below 40.063em in width, the existing logo is full width of the available area.

@carinyawp, add this custom CSS at Customize > Additional CSS and you can adjust the 2.1em value as desired. Originally it was 2.441em.

.entry-content h2 {
	font-size: 2.1em;
}

This will only affect the h2 elements within the content, nowhere else.