Changing header size and padding by code inject

Hi. How can i change the header zize to say, 600 px? I have tried changing it using

@media (min-width: 1024px){
.header-logo .is-logo img {
max-height: 400px;
}
}

but it wont go any bigger. Also i wanted to increase the space betwen the header and the large post image in the slider…again no idea how to do it.

https://www.blackdogonfood.net

cheers

Andrej

Just had a little go on the site you linked, this seems to work:

@media (min-width: 1024px) {
  .header-logo .is-logo {
    min-height: 400px;
    display: flex;
    align-items: center;
  }
}

I’ve had to use some flexbox CSS to make sure the logo stays vertically centre.

hi.thanks. I presume you replaced my code with the above. Im getting an evem smaller ologo now…v strange

the logo would be nice to mke bigger but the thing id really like to do is make the distance between the logo and the ‘kimchi’ photo equal to the space between the left border and the photo…its about half that at the moment

Did you notice that I used min-height instead of max-height? max-height won’t work in this scenario.

yes,pasted your code exactly…ends up with small logo and big gap between logo and top border…im probably doing something very stupid!

Is that not what you asked for?

…How can i change the header size…

yes, but it made the header even smaller.i wanted to mkae it bigger. i tried adding a bigger number into you code but didnt work for me

That code should make the header bigger bug keep the logo the same size. Could you be more clear on what you want ‘bigger’?

aha…sorry, my bad. Just been using wordpress a lot and should have stated ‘logo’…i wanted to make the logo bigger…my apologies

Try this:

@media (min-width: 1024px) {
  .header-logo .is-logo img {
      max-width: inherit;
      max-height: inherit;
  }
}

Seems as though there’s an already large logo and it just needs resetting the dimension styles.

You’ll also need to reduce the width of the nav to fit the bigger logo, which can be done by making flexbox automatically wrap:

.header-nav {
    flex: auto;
}

much appreciated thanks…i’ll play around with it now.

do you by any chance know how to change the size of author image on:
https://blackdogonfood.net/authors/

it looks terrible like this, with images far too zoomed out…ive been looking in screen.css but so far totally failed to find it…not sure if its a pixel setting or a % setting that im looking for…

ive been trying to change the following section in various forms in screen.css.mostly trying contain etc…with no changes showing at all

.author-image {
width: 120px;
height: 120px;
margin: 0 auto 20px;
border-radius: 26px;
background: no-repeat center center;
background-size: cover;

Try this:

.page-author-profile-image {
    background-size: auto;
}

ha…that must have the only thing i didnt do…worked great…mucho thanks.

1 Like