Thanks for using Tracks!
The selector you’re looking for is .entry-container, and if you decrease the padding you can increase it’s width, like this:
.entry-container {
padding: 0 5% !important;
}
You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.
Thanks.
Good theme for photography!
Greetings from Polish
Hi Ben! I used this Custom CSS recently and it’s perfect (love your theme as well). But I’m wonder…is it possible to remove the padding from the comments as well?
http://www.beccabewick.com/?p=776
Thanks!
Becca
Glad you like the theme!
This can be done with the following CSS:
.comments {
padding: 0 5% !important;
}
With just the above code, it will leave the comments looking a bit weird (screenshot), so add the following too to change the position of the actual comment text:
.comment-content {
width: 70% !important;
}
Hi Ben! I’m sorry for my slow response (especially thank you for yours). I added both codes but they didn’t change anything. I’m pretty new to wordpress so I might be missing something basic.
Just in case it’s relevant, I have a longish list of codes in the Custom CSS. Here’s the full text:
.further-reading{
display: none;
}
.comments- {
padding: 0 5% !important;
}
.comment-content {
width: 70% !important;
}
.entry-categories, .entry-tags {
display: none;
}
.entry-container {
padding: 0 5% !important;
}
.ngg-galleryoverview {
text-align:center;
}
.ngg-gallery-thumbnail-box {
float:none !important;
display:inline-block;
}
.ngg-gallery-thumbnail img {
padding: 0px !important; border: none !important;
border-radius: 0px !important;
margin: 0 !important;
}
.ngg-galleryoverview {
overflow:visible!important;
}
.ngg-gallery-thumbnail img {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity .5s linear;
}
.ngg-gallery-thumbnail img:hover {opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity .5s linear;
}
Okay I just tested your CSS and the container width expanded for me. However, the comment width did not because there is a hyphen following “.comments” selector like this “.comments-“.
If you remove that hyphen the width for the comments should update properly.
Oooh that’s nice 🙂 Thank you so much. It takes me forever to find these new things, teaching myself as I go — I very much appreciate the help!!
Cheers!
No problem, glad it’s working for you now 🙂
Hello, hijacking this thread because I have issues with the same topic.
When I use the following code
.entry-container {
padding: 0 5% !important;
}
the “Tags” links on the left side of the content overlaps with the post. How do I move the Tags to the left when I make the content container wider?
Thanks!
Since there won’t be much space remaining on the left, I would recommend keeping the tags and categories below the post content. That can be done with the following CSS:
.entry-meta-bottom.float .entry-categories,
.entry-meta-bottom.float .entry-tags {
position: static;
width: auto;
text-align: left;
padding: 0;
}
.entry-meta-bottom.float .entry-categories a,
.entry-meta-bottom.float .entry-tags a {
display: inline-block;
margin-right: 0.375em;
}
What if I changed the padding to 10-15% and there would still be room for the tags on the left side. How would I move them in that case? Thanks.
Okay in that case, here is the CSS you need:
@media all and (min-width: 68.75em) {
.entry-meta-bottom.float .entry-categories,
.entry-meta-bottom.float .entry-tags {
width: 16.66%;
left: 0;
}
}
You can change the left value to a negative percentage (ex -7%), and play around with that to move the categories/tags further left towards the edge of the post container. You can also modify the width of the categories/tags to give them more or less space.
Those two values along with the padding for .entry-container should give you everything you need to adjust the width to your liking.
just what I was looking for! THANKS!
