Widening the margins on one particular page

Hey there,

Yea that can be adjusted with some CSS.

Just to demonstrate, this code will decrease the padding on all posts so that the text and images reach closer to the sides of the content container:

@media all and (min-width: 56.25em) {

  .entry-container {
    padding: 0 10%;
  }
}

Now to target one post, you can use this snippet instead, but with a small modification:

@media all and (min-width: 56.25em) {

  .postid-19 .entry-container {
    padding: 0 10%;
  }
}

Do you see where it says “19”? That is the ID of the post you want to target. To find a post’s ID, visit the editor and you’ll see the ID in the URL in the browser’s address bar: https://share.getcloudapp.com/wbuboJ7d

Once you swap out “19” with the ID of the post you want to target, the code will take effect. It can be copied and pasted into the Additional CSS section in the Customizer.

Thanks Ben, I tried this but it didn’t have any noticeable effect.

It was a “page”, not a “post”, but when I edited it, it had a post ID of 703.

So I put this block of custom CSS at the bottom:

@media all and (min-width: 56.25em) {

  .postid-703 .entry-container {
    padding: 0 10%;
  }
}

(NOTE: I tried with and without the space after the post ID before the period)

And it still seems to have the same width-margins as all my other pages and posts.

Any ideas?

• This reply was modified 3 years, 3 months ago by kevinlambert.
• This reply was modified 3 years, 3 months ago by kevinlambert.

Ah sorry for missing the part about it being a page.

WP formats the class a bit differently in that case. The following code should work:

@media all and (min-width: 56.25em) {

  .page-id-703 .entry-container {
    padding: 0 10%;
  }
}

That worked perfectly, and looks so good! Thank you! ??

Is there a custom CSS bit that will remove the title block of a specific “page”? (by default it’s a big font with a line underneath it)

Great! Glad you’re happy with it.

Here is a snippet to remove the page title including the underline from a specific page:

.page-id-703 .entry-header {
  display: none;
}

Hey Ben, the snippet to remove the page title including the underline worked!

But it seemed to leave a lot more empty space than necessary in its place.

Any way to tighten that up (specifically for this page) so the top element I write on the page would be where the title normally is, rather than underneath the invisible space that seems to be reserved for the title?

Let me know if that needs clarification. ??

Sure, that’s doable too.

This CSS will remove a lot of the space:

.page-id-703 .entry-content {
  margin-top: 0;
}

And if you want even less space, you can add this too:

.page-id-703 .entry {
  padding-top: 12px;
}

Thank you, @bensibley !

I was searching exactly for this and it worked perfectly. ??