We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Simple: Post title overlaps header

September 3, 2020 at 7:39 pm #3698

[anonymous]

Depending on the value for the hero section height (40+ is uggly) my post titles are overlapping with the site header.

Simple: 2.2.2.3

Publii: 0.36.1

September 3, 2020 at 7:41 pm #3699

[anonymous]

Here an image.

September 3, 2020 at 7:42 pm #3701

[anonymous]

I’m trying to keep my hero section small. I don’t have much there.

December 2, 2020 at 9:19 pm #4674

[anonymous]

I’m having with issue still with Publi 0.37.3 and Simple 2.3.0.0

Can somebody help me here?

December 2, 2020 at 10:28 pm #4680

[anonymous]

Hi,

Could you provide an URL to your website?

December 2, 2020 at 10:34 pm #4684

[anonymous]

Sure: https://enteresc.net/plug-and-play-replacement-ideas-for-testing/

You can reproduce it easily with the mobile emulation.

Currently the height of the hero section is 40vh to look at least at desktop acceptable. As lower the value as worse it gets.

December 2, 2020 at 10:41 pm #4686

[anonymous]

That’s weird – for me on around 360px wide screen it looks ok

December 2, 2020 at 10:42 pm #4689

[anonymous]

And here screenshot from my iPhone 11:

December 2, 2020 at 10:52 pm #4692
[anonymous]
I can reproduce it with:
- Windows laptop with Vivaldi, Chrome and Edge
- Android with Opera Mobile and Chrome
- iPhone SE with Safari (even in landscape mode)
December 4, 2020 at 5:19 pm #4719

[anonymous]

I have found a reason of your issue – screen height 🙂

Please try to add in Tools -> Custom CSS code like below:

.hero {
position: static;
}

.hero__content {
margin-top: 150px;
position: static;
transform: none;
}

December 4, 2020 at 9:26 pm #4722

[anonymous]

Thanks. It works with the side header, but now article header is broken. Table of content and author are overlapping.

I have uploaded the changes.

December 5, 2020 at 7:21 am #4735
Bob
Hi Sebastian,

Try this one:
```
.hero {
    height: auto;
}

.hero__content {
    bottom: inherit;
    left: inherit;
    padding: 10rem 0 8rem;
    position: relative;
    transform: none;
}
```
Also, play around with the padding values to achieve a satisfactory effect.
December 5, 2020 at 10:33 pm #4742

[anonymous]

Thanks! That fixes it.