[Resolved] Preview not matching live

[Christopher]

Hi guys,
could you have a look at below please? I put the admin log in info into the private field.

I have added a background color #fafafa to the title of the news and this is how it looks in the editor:

However, when viewing live, the background color is not showing up:

Thanks,
Chris

[Ying]

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.

[Christopher]

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.

[Ying]

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

[Christopher]

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

[David]

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

[Christopher]

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

[David]

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;
}

[Christopher]

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

[Ying]

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

[Christopher]

awesome, thanks!

[Ying]

No problem 🙂

[Author]

Posts