[Resolved] extra margin below main div

[Anil]

Hi

there is an extra margin (of separating space) below main div on all devices in home and archive pages

please help

[David]

Hi there,

try this CSS to remove the container margin when viewing an archive with columns:

.separate-containers .grid-container .site-main {
    margin-bottom: 0;
}

[Anil]

Hi David
– it is not working on ipad
– not working properly on single post

[David]

I am not seeing the issue on iPad – maybe the device browser cache needs clearing ? ( Or i need more Coffee )

Single post in the columns, not much we can do about that, as the height of the content is defined by the tallest element on the page, which in that case is the sidebar. Theres no simple way to determine there is only a single post ( or single row of posts ) on a page and to style it differently. And even then, making those posts fill the height of the container would be an issue.

[Anil]

Hi

1. I added further :

@media (max-width: 768px) {
	.separate-containers .inside-right-sidebar {
		margin-top: 0;
	}
}

2. I am not able to use your css on home and archive classes like

.home .separate-containers .grid-container .site-main,
.archive .separate-containers .grid-container .site-main {
    margin-bottom: 0;
}

Any help….

I feel this is a small bug in theme… which should be notified… why a user should implement css when customised through customiser…

[Anil]

Hi Tom/David

This is an issue which you should consider in next update.

To resolve at my end:
1. removed your css
2. background color changed to as of body color so that you won’t see pesky separating space in bottom.
3. Still not good on mobile and ipad

Regards.

[Anil]

I recollected this was there with earlier versions of GP because of pagination div, and talked about this here……

[David]

Glad to hear you found a solution that works for you.
In this instance there is no pagination div interfering, and the single post in the container issue is not something that can be fixed. Its not a theme issue its just some limitations on how HTML/CSS works.

[Anil]

Hi David

you can recreate this issue with gp on a new install with infinity scroll…

still not happy with mobile version…

can you please suggest some css to handle bottom margin of container on this page, without disturbing single post page….

[Anil]

Finally resolved.

Created wp_hook to display on front and archive pages

<style>
.separate-containers .grid-container .site-main {
    margin-bottom: 0;
}

@media (max-width: 768px) {
	.separate-containers .inside-right-sidebar {
		margin-top: 0;
	}
}

</style>

[David]

Glad to hear you found a solution.

[Author]

Posts