CSS for aligning widgets horizontally
-
Hey,
Could anyone help me figure out a CSS code that makes the front page widgets align horizontally instead of vertically?
-Michelle
The blog I need help with is: (visible only to logged in users)
-
Can you describe which widgets you had in mind? :)
When I look at your site, I already see three widgets across the screen – I’d recommend against trying to use CSS to make more columns than that, as they’d become really narrow and hard to see on anything but really wide screens :)
-
My problem is this: I would like to have the three pictures on top and then a full width text under them. In the Sela Theme there are three different widget areas who all put new widget content vertically. What I would like is to make the the three columns to three rows instead, as I believe this would fix my problem.
-
Got it, thanks for the detailed explanation :)
To make them rows, instead of columns, we’d need to make sure they stack, instead of floating next to each other, like you’ve mentioned. We’d then need to do some other things:
– make the widget areas full width
– make the widgets only a third of the available width (instead of the widget areas being a third of the width the way they are now)
– actually, don’t do that on the second widget area, since you want that one to be full width
– make sure it plays nicely on smaller screens and goes drops down to a single column at the right time.@media screen and (min-width: 768px) { .front-widget-area .widget-area { float: none; width: 100% !important; /* override conditional CSS that checks the number of widget areas */ } #widget-area-5 .widget, #widget-area-7 .widget { width: 30%; float: left; } #widget-area-5 .widget:nth-of-type(2), #widget-area-7 .widget:nth-of-type(2) { margin-left: 5%; margin-right: 5% } }You’ll notice there’s one !important style in there – a practice that you’d normally want to avoid whenever possible, because it frequently ends up getting in the way down the line, but I’ve made an exception here because we’re overriding a style that sets the width of the widget areas based on which ones are being used. Your design no longer uses that logic, so overriding makes sense – and this is a much cleaner approach than rewriting all of the CSS that was used initially :)
Give that a try and let me know what you think. One thing to keep in mind, this is geared specifically to having three widgets in the first and third widget areas on the front page. If, for example, you used one or two, they would not center automatically with this CSS.
-
Thank you!
I´ve actually, since Im impatient, changed it so I use the testimonial area to put text in. Feel free to check it out. Would it be able to do the same (making a row full width instead of a column) for the testimonial area? Im sorry for chaning my question, but it is easier to edit the testimonial than a widget, as the text would have to be frequently updated.Also: Is there a short code for displaying pictures posted under one hashtag on the website?
-
Would it be able to do the same (making a row full width instead of a column) for the testimonial area?
Give this a try :)
.jetpack-testimonial { width: auto; margin: 0; }Also: Is there a short code for displaying pictures posted under one hashtag on the website?
If you mean posts under a specific tag, then you could use the Display Posts Shortcode, is that what you had in mind?
-
Not quite. I want a grid that shows pictures posted on Instagram under a certain hashtag. Is this possible?
-
-
You’re welcome!
You can embed individual Instagram images, but I’ve tried a hashtag URL and it doesn’t work the same way. You can use the Instagram Widget to display your Instagram account feed, but it won’t be limited to a particular hashtag.
-
-
- The topic ‘CSS for aligning widgets horizontally’ is closed to new replies.
WordPress.com Forums 