Preview not matching live

Hi Chris,

The background color is showing correctly, you can see it clearer if I set it to red:
https://www.screencast.com/t/riyxTmixyp

It doesn't cover the entire text area, because you've set a negative margin-top for it, if you remove that margin, it should show normally.

Thanks, but I need the margin to be set that way to overlap the white bottom part of the image. I would like it to be displayed exactly as it does in the editor pretty much.

Then wrap a container block outside the texts and add the negative top margin to the container instead of the headline block.

Thanks,

Ive tried that but its still being displayed the same way, could you double check if ive done a mistake? I pretty much just removed the margin from the headline, put that headline into a new container and added the margin in that container.

Another quick question, Ive added an image as a logo under Site Identity to replace the text, but somehow its not aligned centered. Is that normal?

Cheers,
Chris

Hi there,

the Container block with the Headline, in its Spacing set the z-index to 1
However are you trying to have this part of the image show a different background color?

https://www.screencast.com/t/YlhEwBL8VC

Thanks david, the z-index did the trick. I just wanted to overlap that part with the text background color and it worked with the z-index- cheers!

Any idea about this? Or should I do another thread for it?
"Another quick question, Ive added an image as a logo under Site Identity to replace the text, but somehow its not aligned centered. Is that normal?"

I actually noticed that my "Montenegro Coworking space & live music bar" tagline was still showing up, once I hide it, the logo is cantered. I would like to keep the tagline though for SEO purposes with fully transparent / non-visible font. Or is that not good practice? I want to keep the header of the website as clean as possible, but want people to find the website if they search for any of the terms in the tagline.

I also noticed that it looks bad on mobile devices, see here: https://www.screencast.com/t/MpuBAyaPGT - is there any way I can add a margin for mobile views only to have more of a space between the top of the site and the logo?

Thanks,
Chris

If you want to stack the logo on top of the site tag line then try this CSS:

.site-header .site-branding-container {
    display: flex;
    flex-direction: column;
}

Thanks, I tried it but in the mobile view the logo is still stuck to the top :/

It's because the header paddings for mobile are set to 0:
https://www.screencast.com/t/j5a5CeoTdiT

awesome, thanks!

No problem :)