Different logo and title placement for web and mobile

Site URL: http://leirbaaletlyd.no

Hello everyone,

I'm quite new to this; I have been working on my website for a couple of weeks.

I've managed to glean from the forums here how to display both logo and title for my site header, and have been quite happy with my design (still undecided on the color scheme, though). However, when I added a dark photograph to the top of my homepage, I saw that I needed to add a different logo to that particular page. I've managed to do something of the sort by adding css styling to the advanced-section of that page (also from what I've read here), but now the logo only displays at top left screen, regardless of screen size - whereas all other pages has logo and title left for web, and logo above title centered for mobile, which is what I prefer.

Here's what the other pages look like:

And here's the troublesome mobile one:

and the working web-version:

Website at http://www.leirbaaletlyd.no

Pw: BaaletsKnitren

Any help would be much appreciated!

Kind regards,

Roald

Where it says vertical-align: center;

change it to middle instead of center.

Let me know if thats what you want

Thanks for answering! Hm.. No, unfortunately, that didn't do it. Should I use media query?

I don't know enough about this to see what (if anything) interacts, but I have two bits of css relating to the logo and title - both in the custom css, and in the advanced page header code injection for the specific page. 

From custom css:

/* Display both logo and site title in header */

.header-title-logo a:after {
    content: "Leirbålet lydproduksjon";
    display: block;
      font-family: 'YomogiRegular';
    font-size: 25px;
    text-align: center;
    vertical-align: center;
    font-weight:900;
    padding-top: 5px;
}
.header-title-logo img {
    vertical-align: left;
}
 

and <style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url("https://static1.squarespace.com/static/624bf2c0638f3073bec82e2b/t/62f516d2a502dd6bdb5cfaee/1660229330500/logo+lyse+glor_or.png");
    background-size: contain;
    background-repeat: no-repeat;
      vertical-align: center;
  }
   .header-title-logo a:after {
      color: #F4F5F1;
}
</style>

Any other ideas?

Kind regards,

Roald

17 hours ago, roligeroald said:

Thanks for answering! Hm.. No, unfortunately, that didn't do it. Should I use media query?

I don't know enough about this to see what (if anything) interacts, but I have two bits of css relating to the logo and title - both in the custom css, and in the advanced page header code injection for the specific page. 

 

From custom css:

/* Display both logo and site title in header */

.header-title-logo a:after {
    content: "Leirbålet lydproduksjon";
    display: block;
      font-family: 'YomogiRegular';
    font-size: 25px;
    text-align: center;
    vertical-align: center;
    font-weight:900;
    padding-top: 5px;
}
.header-title-logo img {
    vertical-align: left;
}
 

and <style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url("https://static1.squarespace.com/static/624bf2c0638f3073bec82e2b/t/62f516d2a502dd6bdb5cfaee/1660229330500/logo+lyse+glor_or.png");
    background-size: contain;
    background-repeat: no-repeat;
      vertical-align: center;
  }
   .header-title-logo a:after {
      color: #F4F5F1;
}
</style>

Any other ideas?

Kind regards,

Roald

 

 

To center logo, you need to change vertical-align: center to background-position: center;

19 minutes ago, tuanphan said:

To center logo, you need to change vertical-align: center to background-position: center;

Hi Tuan, 

Thanks for answering - that makes it look right on mobile/smaller devices, but also moves the logo on larger screens, and i would prefer if it looked the same as the other pages.

So mobile is fine:

But web is wrong: 

It should stay the same as :

What can i do to achieve this?

Kind regards,

Roald

On 8/14/2022 at 4:57 PM, roligeroald said:

Hi Tuan, 

Thanks for answering - that makes it look right on mobile/smaller devices, but also moves the logo on larger screens, and i would prefer if it looked the same as the other pages.

So mobile is fine:

But web is wrong: 

It should stay the same as :

What can i do to achieve this?

Kind regards,

Roald

You can keep old code, then add this code under </style> to make center on mobile

<style>
  @media screen and (max-width:767px) {
  .header-title-logo a {
      background-position: center !important;
    }}
</style>

@media screen and (max-width:767px) {
  .header-title-logo a {
      background-position: center !important;
    }}

Hi again Tuan, 

Thanks - that fixed it! Much appreciated!

Kind regards, Roald