[Resolved] Mobile header overlap featured image

[Ola]

Hi!

I discovered that the mobile header overlaps the featured image, “cropping” it at the top (especially visible on https://www.stag1.ikigai.se/meningsfullhet/hur-du-hittar-dromjobbet/).

How can I adjust so that the mobile header and image connects edge-to-edge rather than create a small overlap?

Best regards,

/Ola

[David]

Hi there,

you have this CSS in your site which is causing the issue:

/* Reducera padding featured image på mobil*/
@media (max-width: 768px) {
    .post-image-above-header .inside-article .featured-image {
        margin-top: -50px !important;
    }
}

[Ola]

Oh, sorry!

That was a dirty fix … Needed to reduce the distance between the post featured image and the header on mobile and I overdid it a bit. Thanks for pointing it out!

I adjusted my code to:

@media (max-width: 768px) {
 		.inside-header {
			padding-bottom: 0px;	
			}
		.inside-article {
			padding-top: 0px !important;
			}
}

Thanks and sorry!

[David]

No problem – glad to hear you resolved it !

[Author]

Posts