Alignment of feature images on main page

  • Author
    Posts
  • #137331

    chelseaolle
    Member
    Original poster

    Hi there,

    Thank you for your beautiful theme.

    I’m having trouble finding how to make my images align in the feed of posts. I understand that it’s suppose to flow like in the example provided but even with different size or more rectangular images, I’m struggling to get them to flow in a nice way like the example. My posts just look a little sporadic and messy.

    I am currently using 1080×1080 for each feature image. (I realize I have different length headings for each but would love to keep them as is if possible).

    Here’s a link to my blog for reference :)
    https://lifesunfinishedbusiness.com

    Best,
    Chelsea

    The blog I need help with is: gdaytotheusa.wordpress.com

    #137332

    chelseaolle
    Member
    Original poster

    The blog I need help with is: https://lifesunfinishedbusiness.com
    * Not G’dayToTheUSA

    #137343

    lelandf
    Theme Author

    The easiest way would be to use Custom CSS to override the Masonry layout, but this would require a WordPress.com Premium plan.

    This question has been asked before a few times, so I will reference a response I made in the past:

    Spatial uses what’s called a Masonry layout, which means the posts may not necessarily align in perfect rows if the content within the posts on a particular row differ in height.

    As you discovered, if even one row has a post in it with a different height in the other, misalignment will cascade all the way down the page.

    If you look at the demo site, it’s a bit more pronounced.

    […]

    Since it seems like you don’t want to use Masonry, here’s some Custom CSS you can use to convert it to more of a strict grid:

    #masonry {
    	height: auto !important;
    }
    
    #masonry:after {
    	clear: both;
    	content: "";
    	display: block;
    }
    
    #masonry .hentry {
    	position: static !important;
    	transform: none !important;
    }
    
    @media (min-width: 1001px) {
    	#masonry .hentry:nth-child(3n+1) {
    		clear: left;
    	}
    }
    
    @media (min-width: 701px) and (max-width: 1000px) {
    	#masonry .hentry:nth-child(2n+1) {
    		clear: left;
    	}
    }
    
    @media (min-width: 701px) {
    	#masonry .hentry {
    		float: left;
    	}
    }

    If you would rather not upgrade to a Premium plan, as of now, you would need to edit the title and excerpt length on each post to match exactly.

    #137597

    chelseaolle
    Member
    Original poster

    Thanks Lelandf!

    I’m on the most upgraded plan, so will give the CSS a go! I am uncertain how to leverage the masonry layout? Is there a video demo you could link me to showcasing the set up there?

    Best

    #137615

    lelandf
    Theme Author

    I am uncertain how to leverage the masonry layout? Is there a video demo you could link me to showcasing the set up there?

    Unfortunately I don’t have a video demo at this time, but the idea is to just add content without concern about things like image size and title length, and let the posts fall into place in a natural way.

    The best place to see a Masonry layout in action with Spatial is probably the Spatial demo site. A Masonry layout is intended to mimic actual masonry (like bricks in a wall) and not a perfect grid.

The topic ‘Alignment of feature images on main page’ is closed to new replies.