[Resolved] Removing margin for WP Show Posts

[Hasan]

How can I remove the margins on left and right side of the posts displayed with Show Posts, so it is displayed edge to edge for the 415px-768px screens only? It should not affect the archive pages. Here is the page in question: https://snapbangladesh.com/stories/ and the single posts.

Please note that I’ve created the margins on archive pages with the following CSS:

@media (min-width: 415px) and (max-width: 1480px) { 
	#content {
        margin-left: 20px;
        margin-right: 20px;
	}
}

[David]

Hi there,

so that CSS is being applied to all pages, so if there are multiple pages that you would like to remove those margins then do this instead:

1. remove the CSS you have.
2. Appearance > Elements > New Hook and give it a title.
3. Add this CSS as the content:

<style>
@media (min-width: 415px) and (max-width: 1480px) {
    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}
</style>

4. On the display rules tab set the pages / archives / posts etc. where you want the code to work. Or if its simpler use the Entire Site rule and Exclude the locations you want to remove it from.

[Hasan]

Thanks David!

I’ve removed the CSS completely, but the margins are still visible on the page for the single column view on mobile. I think it is coming from the Show Posts.

Any more suggestions?

[Leo]

Can you guide us to the page where we can see the issue?

Looks like there are 2 columns on the home page.

Let me know 🙂

[Hasan]

You can check it out here: https://snapbangladesh.com/stories/

Check out the margins on the left and right side of the photo, which should be edge to edge: http://prntscr.com/ny2y4c

[David]

Right – so never spotted this before, but the images are being output with a block wrapper that uses -30px negative margins to make the wider image – the thing is the padding on the article is 40px. So the easiest thing to do is to reduce the padding to 30px with this CSS:

@media (max-width: 768px) {
    .wp-show-posts .wp-show-posts-inner {
        padding: 30px !important;
    }
}

[Hasan]

That worked perfectly! Together with placing the actual CSS codes on the Hook element, it resolved the layout issue.

Thank you so much for the awesome support! 🙂

[David]

Glad to be of help

[Author]

Posts