Archived topic
Separate container classes for posts and pages
2 replies · Started by Joshua on May 12, 2020
Hi!
So I've probably looked at every topic on these forums regarding this topic but still can't find a solution so I'll open my own.
I'm using some custom CSS on my blog posts but that same CSS is being applied to all the other pages on my site. For example, this code:
.separate-containers .site-content {
margin: 0 auto;
position: relative;
right: -100px;
max-width: 1000px;
}However, all the other pages on my site now adopt that same look. I've tried applying the .single-post CSS class to the above code to perhaps only target single posts, but then my code stops working.
Is there a CSS class or ID that I can apply to the above code to only make it target posts? Or perhaps a function I can add?
Thank you so much!
I figured it out. For anyone who needs this solution in the future, try:
.page .site-content {
margin: 0 auto;
position: relative;
right: 0 !important;
max-width: 1200px;
}I replaced the .page class with the .separate-containers class and adjusted the code accordingly
Glad you've figured out :)
