single post header position pushes post to right side

[Sharif]

Hi,
If I go to layout/page header/Single Post Header Location and select ABOVE CONTENT AREA, it pushes primary navigation, site header and top bar to right side of web page. This happens for SINGLE POSTS and in RTL. Everything is fine for Page header.
Please visit following link in mobile view.
https://anis.af/fa/complete-arithmetic/
The problem occurs both in desktop and mobile view but it is more obvious in mobile view.

Regards,

GeneratePress 1.3.46

GP Premium 1.3

[Tom]

It looks like it’s being caused by this CSS:

.page-header-image, 
.page-header-image-single {
    margin: 10px -25px 10px -25px;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sharif]

Hi Tom,
I have not added above css. Can you tell me what should I do?

[Leo]

This maybe added by Comet Cache HTML compressor. Try disabling it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sharif]

Hi Leo,
I disabled css compression and the bug still exists. Any way I do not use full width post headers and just wanted to inform you of the bug.
Thanks Tom and Leo,

[Leo]

The CSS is not added by GP so it’s not a bug of GP. If it’s not added by you then it’s added by another plugin.

Here is the full CSS I see being added:

/*
Image Padding Css
*/
.post-image img {
    position: relative;
    vertical-align: middle
}

.post-image + .entry-header + .entry-content:after, 
.post-image + .entry-header + .entry-summary:after {
    clear: none;
}

.post-image-aligned-left .site-main .inside-article div.post-image {
    margin-top: 10px;
    margin-left: -25px;
    margin-bottom: 10px;
}

.post-image-aligned-right .site-main .inside-article div.post-image {
    margin-top: 10px;
    margin-right: -25px;
    margin-bottom: 10px;
}

.post-image-aligned-center .site-main .inside-article div.post-image {
    margin: 10px -25px 10px -25px;
}
.page-header-image, .page-header-image-single{
	margin: 10px -25px 10px -25px;
}

If you didn’t add that, then try #1 on this page:
https://docs.generatepress.com/article/debugging-tips/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sharif]

Thanks Leo,
Now I got what is the problem. In a post, Tom had wrote some css and I used that css. The following Post:
https://docs.generatepress.com/article/adjusting-the-featured-images/
I have changed -40 px to -25 px and maybe this has caused the problem.
Regards,

[Sharif]

I adjusted the CSS according to content padding and now it is fine.
Thanks,

[Sharif]

Also I deleted the above css mentioned by Tom,

[Leo]

Glad we could help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts