unwanted inline styles from Infinity Pro

[canpress5]

I am working with Infinity Pro but this may also be an issue with other themes.

The theme is adding unwanted space at the top of the blog post page and category page, below the header.
You can see this on the demo blog post and category page:

The Art of Being Creative

https://demo.studiopress.com/infinity/journal/

Looking at the source, this is due to inline styles as follows:

<div class="site-inner" style="margin-top: 72px;">

The same thing is happening on my site except it shows different values for the margin-top, and different again (larger) for mobile.

Where does this inline style come from, and why?

I can override it using
.site-inner {margin-top: 0px !important;}
in style.css but is there a better method?

Thank you for any advice you can give.

https://demo.studiopress.com/infinity/creative/

[Victor Font]

The margin-top is calculated on page load in global.js. Infinity Pro has a fixed header. If you don't have a top margin on site-inner, it will be underneath the header. Since it's impossible for any developer to anticipate how tall a header will be after a user adds their own content, that's why the calculation. If you remove the jQuery, you'll have to add atop margin in style.css otherwise your site will appear to be broken.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[canpress5]

Thank you for the reply Victor!

So it looks like the jQuery calculation is inaccurate in some cases, which still means needing to override it in style.css.
I think it would be easier to deal with the margin-top value solely in style.css rather than having the added confusion of inline styles in the mix.

[Author]

Posts