I'm looking for a way to limit how wide my text runs in full width containers. I've set the container to full width background instead of full width content, but the text is still running too wide for my liking.
I'd like to set a max-width for the content if possible. (Ideally I want 700px.) As you can see in the attached file, if I do this it messes with Salient's alignment of the content and it's no longer centered.
Actually, just looking at this thread I've noticed that this isn't resolved.
The text still extends all the way as far as the div will allow, stretching to Salient's 1100px max-width.
I'm testing it on the first text block at nathanmfarrugia.com/bio
If I try to set my own max-width to something less than 1100px, say for example 700px, the text block is bumped to the left, leaving a big empty space on the right. I still don't know how to get the text block to remain in the center while maintaining a max-width of 700px.
This works wonderfully for normal full width content. But for any column stuff, whether it's a two column row or a "recent blog posts" shortcode, it squeezes everything into your new max-width, which may not look great. Best to use on a case by case basis, on specific pages only. (Easier to implement for blog post content, of course.)
Would really love a way to set a max-width to text without screwing up the alignment.
It does work, but on a broad "everything in the entire container' rather than for a specific div. If the developer has any ideas, it would be great to try them out.
Hey Nathan! The best way to do this would be to add a class onto the row itself when desired. This way you could keep it applying only to where you need it instead of it being a site wide change. For example, the class constrained-width could be added into the css class filed for the row and this could be added in the css box:
Hi!
I'm looking for a way to limit how wide my text runs in full width containers. I've set the container to full width background instead of full width content, but the text is still running too wide for my liking.
I'd like to set a max-width for the content if possible. (Ideally I want 700px.) As you can see in the attached file, if I do this it messes with Salient's alignment of the content and it's no longer centered.
Any help would be greatly appreciated!
Cheers,
Nathan
Hey Nathan!
I see you got it working on the Bio page :) .
Cheers
ThemeNectar Support Team
Ha! You're right, I had. So I have now stolen the solution from myself:
margin-left:-50%!important;
padding-left:50%!important;
padding-right:50%!important;
Actually, just looking at this thread I've noticed that this isn't resolved.
The text still extends all the way as far as the div will allow, stretching to Salient's 1100px max-width.
I'm testing it on the first text block at nathanmfarrugia.com/bio
If I try to set my own max-width to something less than 1100px, say for example 700px, the text block is bumped to the left, leaving a big empty space on the right. I still don't know how to get the text block to remain in the center while maintaining a max-width of 700px.
Is there any way I can do this?
Cheers,
Nathan
Hey Again!
I am afraid we do not have a solution for it. Please consult a freelancer for further customization of the theme.
Thanks
ThemeNectar Support Team
Never mind, I'll try to solve it myself.
Actually was a very easy fix, for anyone wanting to do the same:
.container {
max-width:700px;
}
Sigh. I spoke too soon.
This works wonderfully for normal full width content. But for any column stuff, whether it's a two column row or a "recent blog posts" shortcode, it squeezes everything into your new max-width, which may not look great. Best to use on a case by case basis, on specific pages only. (Easier to implement for blog post content, of course.)
Would really love a way to set a max-width to text without screwing up the alignment.
Hey Nathan!
Sure ill flag the ticket maybe the developer has any quick hacks.
Thanks
ThemeNectar Support Team
Thanks Tahir!
It does work, but on a broad "everything in the entire container' rather than for a specific div. If the developer has any ideas, it would be great to try them out.
Hey Nathan! The best way to do this would be to add a class onto the row itself when desired. This way you could keep it applying only to where you need it instead of it being a site wide change. For example, the class constrained-width could be added into the css class filed for the row and this could be added in the css box:
.constrained-width .span_12 { width: 700px!important; margin: 0 auto!important; }Cheers
Excellent, that worked perfectly. Thank you very much!