try adding at the bottom of you style.css (in editor) – adjust the padding number as needed to get the spacing you want
.article-container{
padding-right:40px;
}
Many thanks, downtimeinc.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Your theme comes with a “Custom CSS” part of the dashboard, use that.
Hm, this has no discernible effect on my layout (when pasted into Custom CSS). I tried various values up to 120px.
I have a full-width slider on the page I’m monitoring. Would that complicate things?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Could you link the page you’re referring to?
It’s on my localhost. Can I post some code or screen grab?
Add this to your custom CSS:
@media (min-width: 768px) {
#content.article-container article.row-fluid {
width: 95%;
}
}
Change 95% to whatever you want, but keep it percentual.
Thanks acub but this had no discernible effect either, even at 50%.
It’s working on a clean install of the theme, so the reason why it’s not working for you must reside in either a plugin you installed or some custom mods you’ve made.
Here’s a test, with 80%.
Or maybe you just placed the code after an unclosed CSS declaration and is simply not read by the browser as a declaration. Or maybe you pasted it inside a media query that’s not applied to your screen resolution?
Thanks for doing that. I can see that it works. But I can’t see why it does nothing for me.
I have no plugins installed. And I removed all my Custom CSS code to test the padding code on its own – and it did nothing. The only real difference between your demo and my site is that my page has a standard 1170 Slider on it.
The silver lining is that I had a Snippet installed to remove the divider lines:
.featurette-divider {
display: none;
}
and I hadn’t realised that it hid the vertical divider between the main page and the sidebar (I only wanted to hide the horizontal divider at the bottom of the Home page). Now that the vertical divider is back, it increases the spacing between the two sections so my self-inflicted problem is now not such a worry. I would still like to increase the gap a little though… But maybe – when I find out how to increase the main page font size – I’ll be happy with the gap.
The real problem is we can’t look at your page. I look at your element, I inspect it in chrome, try some CSS out until I get whatever I want done. Than I copy/paste the code.
Normally we shouldn’t even answer requests for websites we can’t see. There’s room for too much misunderstanding.
Plus, when I’m able to look at the page I am sometimes able to spot the real source of the problem. For example I could examine your CSS and see if there are any errors in it that might render some extra code useless, etc…
Understood acub – and I have taken up too much expert time here so I will try to let others have their turn. No doubt I’ll be back though!
Incidentally, my Safari has a very exciting Developer menu which shows me all sorts of stuff – none of which I understand. But I can see that I have a plugin called Fancybox installed – but since it doesn’t show up in my Dashboard, I assume it is built-in to the theme or to WordPress. In either event, it is unlikely to be the cause of any problem.
I’ll stop trying to learn/understand stuff for a while and just carry on building with the tools I have — which thanks to this community are more than adequate to create a very nice website.
I don’t know why the longer version didn’t work for me but this shortened version from another thread does the trick:
article.row-fluid {
width: 95%;
Thanks again.
Just to answer my own related question, I can similarly increase the line height (leading) in the main text areas with:
article.row-fluid {
line-height: 150%;
}
…which, imho, makes the default font and text size much easier to read in wide lines, eg with 1 sidebar or none.
I think the key for this newbie is trying to figure out what the different WP/Customizr elements are called so that I can be sure I’m trying to apply new code to the right bit.
Of course, I may soon discover that “article.row-fluid” applies to some other text somewhere that I don’t want to increase the line-height of, eg in widgets. (That’s not a question btw since I’ve banned myself from asking questions for the moment since once I start I can’t stop.)
Are you sure you want the content narrowed on mobiles too? If not, set min-width using a media query (see above).
