Page 1 of 1
Display latests blog posts in 3 columns
Posted: Fri Feb 09, 2018 7:48 am
by NoWords
First of all hi Everybody
I have 2 small questions related bludit and a theme I am using with it:
Theme:
https://themes.bludit.com/theme/clean-blog
- Is it possible to display the latest blog posts in a row made of 3 columns? Please see attachemnt.
- How can I render only latest 10 posts and then a "Load More Button"?
Thanks in advance
Re: Display latests blog posts in 3 columns
Posted: Fri Feb 09, 2018 1:03 pm
by Edi
NoWords wrote: ↑Fri Feb 09, 2018 7:48 am
- Is it possible to display the latest blog posts in a row made of 3 columns? Please see attachemnt.
This is possible modifying the theme (CSS). You can use for example flexboxes:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- How can I render only latest 10 posts and then a "Load More Button"?
This can be set at "Settings" > "Advanced" > "Items per page".
Re: Display latests blog posts in 3 columns
Posted: Fri Feb 09, 2018 2:17 pm
by NoWords
Thanks Edi,
As you said in chat I will wait for you to post a hint on how to display different blog posts in the different columns
Re: Display latests blog posts in 3 columns
Posted: Fri Feb 09, 2018 6:23 pm
by Edi
1) Open the template home.php of the theme (in /bl-themes/clean-blog/php) and modify line 18:
Exchange
Code: Select all
<div class="col-lg-8 col-md-10 mx-auto masonry">
with
2) Activate the plugin HTML Code, click "Settings" and enter the following in the field "Theme Head":
Code: Select all
<style>
.flex-container {
display: flex;
display: -webkit-flex;
justify-content: stretch;
margin: 40px 0;
}
.post-preview {
margin: 0 30px;
text-align: left;
width: 30%;
}
</style>
Re: Display latests blog posts in 3 columns
Posted: Sat Feb 10, 2018 6:35 pm
by NoWords
Edi wrote: ↑Fri Feb 09, 2018 6:23 pm
1) Open the template home.php of the theme (in /bl-themes/clean-blog/php) and modify line 18:
Exchange
Code: Select all
<div class="col-lg-8 col-md-10 mx-auto masonry">
with
2) Activate the plugin HTML Code, click "Settings" and enter the following in the field "Theme Head":
Code: Select all
<style>
.flex-container {
display: flex;
display: -webkit-flex;
justify-content: stretch;
margin: 40px 0;
}
.post-preview {
margin: 0 30px;
text-align: left;
width: 30%;
}
</style>
Hi Edi,
Thanks this works perfectly on desktop, but how can I display 1 column on mobile devices?
Shall I put the @media queries also in the "Theme Head"?
Re: Display latests blog posts in 3 columns
Posted: Sat Feb 10, 2018 7:36 pm
by Edi
Oops, yes! I forgot this...
Re: Display latests blog posts in 3 columns
Posted: Sat Feb 10, 2018 8:20 pm
by NoWords
Edi wrote: ↑Sat Feb 10, 2018 7:36 pm
Oops, yes! I forgot this...
It’s ok
Question: how come you suggest the flex solution and not to work with bootstrap columns?
Re: Display latests blog posts in 3 columns
Posted: Sat Feb 10, 2018 9:35 pm
by Edi
NoWords wrote: ↑Sat Feb 10, 2018 8:20 pm
Question: how come you suggest the flex solution and not to work with bootstrap columns?
I do not use Bootstrap, because I prefer simple coding instead of frameworks.
It could make sense, if a theme uses Bootstrap. But Bootstrap also uses flexboxes:
https://getbootstrap.com/docs/4.0/layout/grid/
and
https://medium.com/codingthesmartway-co ... 5405ce5ebf