[Resolved] Removing margin for WP Show Posts

Home Forums Support Removing margin for WP Show Posts

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #920324
    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;
    	}
    }
    #920770
    David
    Staff
    Customer Support

    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.

    #920905
    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?

    #920908
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #920909
    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

    #921005
    David
    Staff
    Customer Support

    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;
        }
    }
    #921358
    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! πŸ™‚

    #921371
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.