How to put text widgets on one line in a middle row widget
-
Since I’m having issues with my portfolio pages (the side widgets are out of wack), I was thinking about making middle row widgets for these pages. I want to have all the text widgets be on one line. How do I do that?
My URL is http://ebonymcfarland.wordpress.com/
My theme is Triton Lite
The blog I need help with is: (visible only to logged in users)
-
The Triton Lite theme’s middle row widgets are meant to be three per line, so the theme includes this CSS to make that happen:
.site-midrow .widget:nth-child( 3n+1 ) { clear: left; }That means the first of every three widgets in the middle row will get that CSS rule, putting it on a new line. To change that, you can use CSS like this:
.site-midrow .widget:nth-child( 3n+1 ) { clear: none !important; }Give that a try and let me know how it goes. :)
-
Hi rachelmcr:
I think the code worked but everything is not on one line because of the footer not looking right. Would you happen to have a solution to fixing the footer? Maybe if the footer was fixed then the everything in the middle row widget, will be on one line.
-
Can you describe exactly how you want the footer to look? That will help me give you the right fix for it. :)
-
-
Ah, I see what you mean now. It looks like there might be a stray HTML element (like an extra opening div tag) in your page content that’s causing this layout issue. We have some information in our HTML Troubleshooting guide that explains how to investigate that. Please let me know if you’d like me to help investigate that for you.
-
Could you help me investigate that?
I had already had this theme before I switch themes and I came back to this one. I had the same issue before. Someone gave me the following code:
body.page-id-592 {
position: relative;
}
.page-id-592 .site-footer {
position: absolute;
bottom: 0;
left: 0;
}
.page-id-592 #posts {
padding-bottom: 50px;I changed the 592 number to 6943 because 6943 is the number in the HTML code. Even when I did that, the code doesn’t work.
-
Sure, I’d be happy to look into it for you. I see that you’re currently editing the Portfolio page on your site. If you can save your changes and close the editor, I’ll be able to open it to take a look at the content in the editor on the page.
-
-
Thanks! If you switch from the Visual editor to the Text editor, you’ll see the issue near the top of the page here:
<div class="page-links"><!--nextpage--></div>The nextpage code actually creates a pagebreak, which means that opening div right before it never gets closed on the same page. That’s what’s causing the layout issue here.
You can remove the div tags around that nextpage code to fix that, and it should resolve the issue with your footer.
-
OK. I removed all the div tages around the page numbers.
One more question. Do you know a way to strengthen the middle row widgets?
-
-
Sorry, I also meant “straighten” out the middle row widgets to where everything is on one line.
-
You’ll need to take a look at the width and spacing on the middle row widgets, to get them to fit all on one line. Otherwise, each widget will be too wide to fit all on them on one line.
I’d recommend using the tips in our guide to How to Find Your Theme’s CSS to see how wide your widgets are, so you can adjust that to fit the number of widgets you want on one line.
If you run into trouble with that, please let me know what CSS you’re trying to use and I can take another look at it for you. :)
-
Hi rachelmcr:
I was able to get everything on one line. I added “margin-left:-110px;” to the following code:
.site-midrow .widget:nth-child( 3n+1 ) {
clear: none !important;
margin-left:-110px;
}.I also (I think) worked with the margin-right code in the following code:
.site-midrow .widget {
clear: right;
float: left;
list-style-type: none;
margin-bottom: 15px;
overflow: hidden;
width: 260px;
margin-right: -130px;
}.The only problem is that I can’t seem to move the “page 4” text widget off of the “page 5” text widget. I looked at the theme’s CSS code and the page 4 text widget is label as “li#text-24.
If you can help me fix this issue, then I would be all set with this
-
Actually I’m thinking Page 5, 6, 7 and 8 text-widgets are the ones that need to be moved to the right.
-
I had clicked on the WordPress Chat feature that popped up and I chatted with a person about the situation and he suggested that I shorten the “Facebook Headers” text. So I put in a break code between the words and now the text off of the page 5 text widget.
But do you know code that would space out the widgets evenly? I’ve been playing around with the width and right margin in the .site-midrow .widget code but the widgets doesn’t look evenly spaced to me. If you can’t find a solution, that’s fine.
-
I took a look at how you have the widgets set up, and they look pretty well spaced now: https://cloudup.com/c8pm8qeCb-K
If you’d like to re-adjust that spacing, I’d recommend looking at the recommendations in this guide to spacing out objects with CSS:
There are different ways to do it, and some of the tips on that page might help you find the best solution for what you’re going for. :)
-
OK. I will take a look at it. Thank you very much for helping me these last couple of days.
- The topic ‘How to put text widgets on one line in a middle row widget’ is closed to new replies.
WordPress.com Forums 