CSS for Wordpress site to limit width of content/text on a single Page?
October 4, 2020 9:20 AM Subscribe
Does anyone who knows Wordpress / coding know what CSS to plug-in for a Wordpress-based website into the custom CSS to limit the width of the content just on a single particular Page?
I'm a tyro when it comes to coding... I have a 'Responsive Design' Wordpress-based website in which the content expands and collapses based on the size of the browser screen on any device.
A right sidebar is automatically enabled on all Pages--which is fine for all, except one.
I realized that I need to disable the sidebar on one particular Page. But when I do, the content/text expands to fill the entire width of the browser, making it especially annoying to read on a laptop or desktop screen. (I'm selling an item on this page, so the description needs to be easily readable.)
I'd like to limit the width of the content/text on just that one particular Page, so it doesn't expand.
It seems I could type some custom code into the Custom / Additional CSS form of the WP theme builder--but don't know what precisely.
If not, any other coding solutions?
Thanks much!
I'm a tyro when it comes to coding... I have a 'Responsive Design' Wordpress-based website in which the content expands and collapses based on the size of the browser screen on any device.
A right sidebar is automatically enabled on all Pages--which is fine for all, except one.
I realized that I need to disable the sidebar on one particular Page. But when I do, the content/text expands to fill the entire width of the browser, making it especially annoying to read on a laptop or desktop screen. (I'm selling an item on this page, so the description needs to be easily readable.)
I'd like to limit the width of the content/text on just that one particular Page, so it doesn't expand.
It seems I could type some custom code into the Custom / Additional CSS form of the WP theme builder--but don't know what precisely.
If not, any other coding solutions?
Thanks much!
Messing around with a theme's code can have a lot of unintended consequences even when you know exactly what you're doing.
A lot of themes include multiple page templates, so that for each page individually, you have the option of showing it as full width, narrow+sidebar, narrow without sidebar, etc. So if it's not too much trouble to switch themes, you might want to find a theme that does that.
posted by adamrice at 2:24 PM on October 5, 2020
A lot of themes include multiple page templates, so that for each page individually, you have the option of showing it as full width, narrow+sidebar, narrow without sidebar, etc. So if it's not too much trouble to switch themes, you might want to find a theme that does that.
posted by adamrice at 2:24 PM on October 5, 2020
I do wonder why, if you don't want all that width, you're not wanting to display the sidebar. But whatever.
You maybe could think about the problem in a different way. Yes, you could use CSS as EL-O-ESS suggests to limit the maximum width of the container on that one page (or across the whole site, since a max-width setting only has an effect when the selected entity would've been that wide without it)
But maybe a better way to look at it is, how can you use that extra width to sell your product in a non-annoying way? Maybe use the responsive Columns block in the block editor to break the page up to a left and right side, put text on one side and pictures or video on the other -- or text on both sides, whatever, though people do like pictures!
Another thing to explore is whether you can display the sidebar, but give it different contents depending what page you're on. There are plugins that enable conditional widget display based on, e.g., URL matching.
Tyler Tork -- torknado.com
posted by Chlorine at 4:22 PM on October 5, 2020
You maybe could think about the problem in a different way. Yes, you could use CSS as EL-O-ESS suggests to limit the maximum width of the container on that one page (or across the whole site, since a max-width setting only has an effect when the selected entity would've been that wide without it)
But maybe a better way to look at it is, how can you use that extra width to sell your product in a non-annoying way? Maybe use the responsive Columns block in the block editor to break the page up to a left and right side, put text on one side and pictures or video on the other -- or text on both sides, whatever, though people do like pictures!
Another thing to explore is whether you can display the sidebar, but give it different contents depending what page you're on. There are plugins that enable conditional widget display based on, e.g., URL matching.
Tyler Tork -- torknado.com
posted by Chlorine at 4:22 PM on October 5, 2020
This thread is closed to new comments.
<body>tag for that specific page (or post) which has the page ID: something like<body class="page-id-137">. Look for that. Then you need to figure out what class or ID is applied to the part of the page you wish to constrain. You might have decent luck trying something generic like ".hentry" but this is totally theme-specific. In the end, your CSS to target the main content section of a particular page will look something like:body.page-id-137 .hentry {max-width: [your-number-here]px
}
MeMail me a link/more info and I'd be happy to provide the exact CSS you could try.
posted by EL-O-ESS at 10:02 AM on October 4, 2020 [2 favorites]