Want my blog posts to sit in 3 columns on the Home page (Swell template)

laurapalmerwp · Member · Feb 20, 2015 at 2:57 pm
Copy link

Add topic to favorites
Anyone help with this? Its all automated within the customise Theme/Banner section in the Swell template. Currently, the blog posts are placed within 1 column and when you rollover the post, the image you have featured in the actual post, appears. Problem being when the image is small, it is stretched.

I’d like the columns to align with the portfolio thumbnails above the posts too if possible..

I’m only a beginner with css but can hack into it a bit – if anyone can help?

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 21, 2015 at 12:46 am
Copy link
Hi there, given the way that Swell is designed, taking the posts into three columns is problematic. At a width of 900px, the portfolio section drops to two columns and then to one column at 700px width. The following will make the blog posts display at 3 columns at 901px and wider, but below that it reverts back to the single column display.
```
@media screen and (min-width: 901px) {
	#blog .posts .post {
		width: 30%;
		display: inline-block;
	}
	#blog .posts .post h2 {
		font-size: 2.0em;
	}
	#blog .posts {
		margin-left: 50px;
		margin-right: 50px;
	}
}
```
laurapalmerwp · Member · Feb 22, 2015 at 2:05 pm
Copy link
Blimey, thank you so much! I didn’t expect anybody to work that one out for me!!

I take it it can’t drop to 2 columns on a medium size screen then? I’m sure you would have said if it could – but wanted to doublecheck!
thesacredpath · Member · Feb 23, 2015 at 10:15 pm
Copy link
You are welcome. I wasn’t able to get it to cleanly drop to two columns on narrower screens/windows.

No items found.