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.

Hero image not covering all the header area on mobile device [Tatto theme]

February 21, 2020 at 8:30 pm #1807

[anonymous]

Hello! I’d like to thank you for the great job you’re doing on the Publii CMS. I started playing with it several months ago and I’m really delighted with what you achieved.

When testing the tattoo theme, I noticed that when I select a single post to be displayed on the home page, the hero image doesn’t cover all the header area.

Here’s a screenshot of what I got on the chrome dev tools mobile device simulator.

And I got the same result on my smartphone.

I’d like to fix it but I don’t know how to proceed. Thus, I’ll be grateful if I could get some guidance from you or a fix if you can afford to do it as soon as possible.

Thank you very much.

February 22, 2020 at 5:50 am #1813

Bob

Could you provide a URL to your site?

February 22, 2020 at 11:24 am #1815

[anonymous]

The above image is from a local testing instance. There’s a live instance at https://www.survivanet.com/

Excuse me for my lateness.

February 22, 2020 at 12:14 pm #1816
Bob
Thanks, I think this is due to your custom modifications, the “post__featured-image” container is missing the `hero__image` class.

Now:
```
<figure class="post__featured-image">
   <img ...
```
Should be:
```
<figure class="hero__image post__featured-image">
   <img ...
```
February 22, 2020 at 1:38 pm #1817

[anonymous]

I’ll try to apply the fix you just provided after reading the docs about themes overrides.

Thanks.

February 22, 2020 at 2:29 pm #1818

[anonymous]

Your solution worked very well.

Thank you very much.