blog layout

  • Hello,

    I’m looking to see if there is a way to change the layout for the blog page. Instead of having each post on top of each other, could I have a row with three columns and in each column has the blog image and blog description under it with a read more button?

    Thank you for your help/advice

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Acme Themes

    (@acmethemes)

    Hello LinaTee,

    Try this custom CSS:

    .site-main > article {
    width: 30%;
    float: left;
    margin: 10px;
}

.site-main > article:nth-child(3n+1),
nav.navigation{
    clear:left
}

    Let us know if this solved your requirements.

    Best Regards!
    Acme Themes

    Thread Starter LinaTee

    (@linatee)

    Thank you for this code. When I use it, it does make the blogs go into 3 columns but the rest of the site is put in a single column. I just need the blog page to be in the columns.

    Theme Author Acme Themes

    (@acmethemes)

    Hello LinaTee,

    Please try this custom CSS:

    .blog  .site-main > article {
    width: 30%;
    float: left;
    margin: 10px;
}

.blog  .site-main > article:nth-child(3n+1),
nav.navigation{
    clear:left
}

    Best Regards!
    Acme Themes

    Thread Starter LinaTee

    (@linatee)

    This is exactly what I wanted on the desktop but it looks awful in mobile. Do you have a suggestion?

    Theme Author Acme Themes

    (@acmethemes)

    Hello,

    Full code with mobile device supports, just past it on Appearance => Customize => Additional CSS:

    .blog  .site-main > article {
    width: 30%;
    float: left;
    margin: 10px;
}

.blog  .site-main > article:nth-child(3n+1),
nav.navigation{
    clear:left
}

@media only screen and (max-width: 768px){
	.blog  .site-main > article {
		width: 100%;
		float: none;
		margin: 0;
	}
}

    Best Regards!
    Acme Themes

    Thread Starter LinaTee

    (@linatee)

    This is it!!! Thank you

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘blog layout’ is closed to new replies.