Support » Theme: Mercantile » 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 5 replies - 1 through 5 (of 5 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

    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

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.