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 :) :D

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

Code: Select all

<div class="flex-container">
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

Code: Select all

<div class="flex-container">
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... :oops:

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... :oops:
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