CSS Widget Display
-
Hi! I have the Purpose Theme and want to add 12 widgets (3 per line) to my ‘home page’. The widgets should be all the same size…how can I do this? Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, the tallest footer widget content in a row will determine the height of the row. Right now I’m seeing that in your image widgets, you are setting a size of 5000px x 5000px, which is wider than the widest desktop monitor. If you leave the width and height blank in the image widgets, the software will make the image as large as it can within the constraints of the widget itself. I would suggest as a first stop to edit each of those widgets and remove the height and width and save and then see where you are.
-
Hi! Thanks for your replies. I took away the size of each picture and unfortunately, nothing has changed. Can you help me out please? Also, how can I add a widget at the bottom (for my impressum)? I don’t seem to have an option for this. Thanks
-
Upon looking further, the large size of the last image on the right seems to be by design. Sorry I didn’t look at that closer. Add this to your custom CSS to make the one on the right the same size as the others.
.footer-widgets .widget:nth-child(4n+4) { width: 20%; } -
Thanks, it worked for the 4th. image. But how do I get 3 images per row (bigger) for a total of 12 on 4 rows? The first image on the second row (Werbung Pauschal) does not have the same size as the other ones. Is there a specific reason why?
Finally, can we add a widget at the bottom (center) of my website (for my impressum?). Thanks for your help! :-) -
Hi, this doesn’t always work, but with Purpose I was able to change it to 3 columns of 4 with the following. First off, replace this rule
.footer-widgets .widget:nth-child(4n+4) { width: 20%; }with this
.footer-widgets #image-5:nth-child(4n+4) { width: 30%; }and then add these 3 below it.
.footer-widgets .widget:nth-child(4n+1) { clear: none; } .footer-widgets .widget:nth-child(3n+1) { clear: both; } .footer-widgets .widget { width: 30%; }Also, I noticed that some of the images in your image widgets have right alignment and some have left. I would set them all to either right or left, or perhaps even better, set them to center alignment by editing all of your image widgets.
Currently you have 11 widgets in the footer area, so the last two widgets will be given be spaced left and right on the final row. I assume you will be adding another widget.
Also, some of the above code is widget specific to get the spacing and sizing and such right, so if you change the order or add anything to the first couple of rows, it could result in some weirdness. If you do, and if it does, just let me know and we can make adjustments to things.
In general, changing the number of things per row is not something I recommend because of the weirdness that may happen if things are later changed/rearranged.
Let me know how things go.
-
Hi! I added the css and worked almost ok, although that it got all weird as soon as I changed the alignments of the widgets. Maybe it is better to keep 4 widgets per row (bigger) on 3 rows? I will have to change the order of the widgets at some point. Because the widgets will be bigger, how can I change the size of each widget’s title? Thanks again!
-
You are welcome. Yes, changing widgets around, or changing them out for others could cause issues. Let us know if you have additional questions.
-
Ok will keep the 4 widgets per row, but I need to make them a bit bigger so they fit better. Can you please give me the “formula” to change their size (and also that once the widgets are bigger, the 4 of them are centered properly on the page – the blank space on the left is the same as the blank space on the right). Thanks!
-
Oh and before I forget, like I asked on one of my previous mail, if the size of the title of each widget can also be changed (to fit with the new size). :-)
-
Sure. Replace the code you now have in your custom CSS with the following.
.footer-widgets .widget:nth-child(4n+4) { width: 25%; } .footer-widgets .widget { width: 25%; } -
Thanks, it looks very good although many of the widgets are not exactly the same size. How can they all be exactly the same size? Is there a way to have the titles of each widgets on bold? Sorry to bother but I really hope they are my last questions. THanks again for all your help! Regards :-)
-
The theme sets a “bounding box” of sorts for those images of 425px wide and high and it makes the image fit into that box. If the image is taller than it is wide, then the height will be the limit, and if the image is wider than it is tall, then the width will be the limit. With Purpose, for theses images, I would suggest that you make all images square (height and width the same). It doesn’t matter the actual size just as long as the height and width are the same.
On the widget titles, due to the font you have chosen, when they are made bold at the size they are now, they become difficult to read because everything sort of gets mushed up. I’ve added a font size declaration to this and increased the font size for legibility. You can of course remove that, or adjust it as you desire.
.widget h6 { font-weight: bold; font-size: 1.8rem !important; } -
-
- The topic ‘CSS Widget Display’ is closed to new replies.
WordPress.com Forums 