If you are just concerned with adjusting the margin on the Journals page, you can add this rule:
@media screen and (min-width: 56.875em) {
.page-id-113 .entry-header,
.page-id-113 .entry-content {
margin: 0 15%;
}
}
Note that this is inside a media query for desktop widths. I left the rule for mobile widths alone.
The current value is 15%, meaning the margins on the sides take up 15% of the width of the container. This is for both left & right sides, so the total margin space is 30%. Adjust this value as you see fit.
Thanks for the reply. I added the code to my style.css file in my child theme folder, and changed 15% to 5%. However, nothing seems to have changed.
Am I doing something wrong?
Thanks again.
To me, the size of your margins have been noticeably reduced on your Journals page. Maybe you need to flush your browser’s cache? Try pressing Ctrl-F5 from your keyboard.
Ah you’re right. It works great. Thanks very much.
So how do I change the margin for other pages? Presumable I change the id number?
How did you work out the ID number of my page?
Also, if I want to change the margin for all pages, do you know how I do that?
Thanks again. youre a massive help.
A properly constructed WordPress theme will call a function called body_class. What this function does is to add special class names to the <body> element of each page or post, including class based on the unique numeric ID that is assigned to each page and post. If you inspect a page on your site using a web debugger (like Firebug for Firefox or Chrome Developer Tools) and inspect the <body> element (or just do a view source on the page and look for the <body> element), you’ll see that the body for the Journals page has a class called page-id-133. The number at the end of each post or page ID will be unique for each page/post, so all you need to do to make sure the CSS that you are writing only affects a particular page is to include that class name at the beginning of your rule’s selector.
Your Forums page does not have an ID associated with it because it’s not considered a single post or page, it’s an index/archive page. However, you can still target CSS for that page only by including the bbpress class at the front of the rule’s selector.
If you want a rule to be active for all pages, then just make sure you don’t include the page-specific classes. For example, if you want the rule that I originally posted to be active for all pages, then start by removing the .page-id-133 from the beginning of each of the selectors. However, because the original rule which sets the margin to 15% has this selector:
.no-sidebar .entry-header,
.no-sidebar .entry-content
You should include the same .no-sidebar class so the rule has the same specificity as the original rule. Otherwise, the original rule will override your new rule. (The reason why you didn’t need to include the .no-sidebar class in the new rule is that class names have the same specificity value, so substituting one class name for another means that the selector retains the same specificity value, and your later rule would override the original rule).
Wow, thanks very much for that.
I’ll start having a play then.
A lot of good info there. Thanks very much for taking the time.
