you can do this with css… since it s all bullet points
you need to learn and undersand how css works
ul {
margin: 0 auto;
text-align: center;
list-style-type:none;
padding:0;
}
li {
display: inline-block;
vertical-align: top;
float:left;
width:50%;/*this is comment if you wish the grid to be 3 in a row put 33%, if 4 then 25% if 2 in a row then 50%*/
}
Hey @nemanja.radevic
On behalf of everyone that’s copy and pasted your css suggestion and didn’t want to take 30 sec out of their time to say this, I’ll say it for them, THANK YOU VERY MUCH! Your suggestion worked wonderfully!
You wouldn’t happen to know how to move the titles to align them with the top of images, would you? :p
Once again, thank you. 🙂
Okay nevermind that last question. I found a way to do this. It was simple. For anyone wondering how I did it, heres a rundown. First add [catlist title_class=lcp_title] then style “lcp_title” in your css. I gave my images specific widthXheight so the title alignment might need to be bigger or smaller, depending on your image sizes. I aligned my images with this
.lcp_title{
margin-left: -50%;
}
Change the margin-left value to align them to your images, or add new properties to that selector. 🙂
One last time, thank you @nemanja.radevic!
Thank
Do you Have a link to see the final work?
Thanks @nemanja.radevic for the code. I am working on styling this page and need a bit of help.
No matter what I try, I can quite seem to get the photos to center under the post title.
Also, is there anyway to get the Post title to wrap better…ie., not cut off words?
My issue is resolved, I ended up just adding some margin to the thumbnail image:
.lcp_catlist img {
float: left;
margin: 10px 0 0 30px;
}
The titles on this page are not lining up correctly above each image.
Any insight? I styled the exact same way I did the grid here.
This is great! Exactly what I need. But I am very new to css. Would anyone be willing to point to to a link or offer a description of how I would incorporate this particular layout?
Many, many thanks.
Here is my code that I used it for client, it will generate 3X4 grid.
Shortcodes:
[catlist id=3 catlink=yes category_count=yes numberposts=12 thumbnail=yes thumbnail_size=150,150 title_limit=25 pagination=yes instance=1]
[catlist id=5 catlink=yes category_count=yes numberposts=12 thumbnail=yes thumbnail_size=150,150 title_limit=25 pagination=yes instance=2]
[catlist id=6 catlink=yes category_count=yes numberposts=12 thumbnail=yes thumbnail_size=150,150 title_limit=25 pagination=yes instance=3]
CSS:
.lcp_catlist {
margin-left: auto;
margin-right: auto;
}
.lcp_catlist li {
width: 33%; /*this is comment if you wish the grid to be 3 in a row put 33%, if 4 then 25% if 2 in a row then 50%*/
text-align: center;
min-height: 150px;
display: inline-block;
vertical-align: top;
margin: 0;
}
.lcp_catlist li:after {
content: '.';
height: 0;
visibility: hidden;
display: block;
clear: both;
}
