Blog is not aligning correctly horizontally

  • Author
    Posts
  • #111270

    comeuprecords
    Member
    Original poster

    Hi,

    I have a problem occurring with a new blog I’m building at the moment. the Theme I’m using is called ‘Spatial’.

    https://comeuprecords.com/category/mixes/showcase/

    As you can see some blogs are appearing out of line. This then is disturbing the order of the blogs. It seems like when one moves down, it registers this as a line below and so it is displaying the ‘middle’ blogs as the earliest in that line.

    I have a WordPress premium subscription.

    Has anyone got any ideas to a fix?

    all the best,

    Felix Poole

    The blog I need help with is: comeuprecords.com

    #111386

    lelandf
    Theme Author

    Hi Felix,

    Thanks for using the Spatial theme!

    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.

    It looks like in your case, the title is the same height (just one line) and the image is the same height. What differs is the excerpt (content between the title and “Continue Reading”) length. Since excerpts are cut off by word count, not by character, these tend to be different heights.

    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;
    	}
    }

    Let me know how it goes.

    #111387

    comeuprecords
    Member
    Original poster

    Hi,

    Just put this in and it works great.

    Thanks so much!

    All the best,

    Felix

    #111389

    comeuprecords
    Member
    Original poster

    Hi,

    I hope you don’t mind but I have another question.

    Is there any way we can give the slide out primary menu the ability to scroll the page?

    Cheers,

    Felix

    #111390

    lelandf
    Theme Author

    Hey Felix,

    Glad to hear it’s working.

    Would you mind making a new topic for separate questions? Just to keep things organized. Keep in mind other users of the Spatial themes browse this forum for answers, and it would be hard to find the answer to that question in a topic about something else.

    Thanks!

    Regards,
    Leland

    #111391

    comeuprecords
    Member
    Original poster

    Sincerest apologies it’s my first time on here.

    I will do so now.

    #111392

    lelandf
    Theme Author

    No problem, thanks!

    I’ll go ahead and mark this topic as resolved now.

The topic ‘Blog is not aligning correctly horizontally’ is closed to new replies.