No Sidebar Theme – Front Page with Even Columns

[Nigel1985]

I am looking to implement a front page similar to this site (http://eye-swoon.com/) using the No Side Bar child theme - specifically two things (not sure if both are possible).

1) After the first post, I would like subsequent posts to appear in an even grid 3 posts wide (like Eye-Swoon if you scroll towards the bottom) instead of the current 2x2 with alternating widths

2) Can I add another row of featured images under the first post in a 2x2 (like eye-swoon)? So the first post would be 100%, post 2 and 3 would be 50%, and post 4 and beyond would be 33%?

Any ideas/suggestions are much appreciated!

My page: add1tbsp.com

http://add1tbsp.com

[Nigel1985]

I managed to display the front-page entries in a 3x3 grid by changing .entry class width from 58% to 31.33% in the CSS (see below).

New new issue is mobile responsiveness. On a mobile device, the posts displayed 1 across, but now they display 3 across and smooshed.

Any ideas how to fix the mobile site (or any issues with the solution I found)?

All help is greatly appreciated!

.front-page .entry {
	background-color: #eee;
	float: left;
	height: 400px;
	margin-bottom: 2%;
	margin-left: 1%;
	margin-right: 1%;
	position: relative;
	width: 31.33%;
}

.front-page.first-page .entry:nth-of-type(2),
.front-page.first-page .entry:nth-of-type(4n+1),
.front-page.first-page .entry:nth-of-type(4n+2) {
	width: 31.33%;
}

.front-page.paged .entry:nth-of-type(1),
.front-page.paged .entry:nth-of-type(4n),
.front-page.paged .entry:nth-of-type(4n+1) {
	width: 31.33%;
}

.front-page.first-page .entry.first-featured {
	height: 576px;
	width: 98%;
}

[Nigel1985]

Solved it, needed to edit the original .css and not the CSS Stylesheet Editor

[Author]

Posts