Minimum Home Page from 2 Column Snippets to 1 Column Full Content?

[kzoll]

On the front page, instead of the 2 columns of blog post snippets, I want it to display one column centered with the full content of each post - not excerpts or snippets. I know this has something to do with the Grid Loop (I think) but I'm clueless on how to tweak it. Help appreciated!

http://www.theinfertilityvoice.com/beta/

[Lauren @ OnceCoupled]

Looking at your site, you've got this figured out. Let me know if that's wrong, and you still need help. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[kzoll]

Thanks Lauren - I figured out how to basically strip the Grid Loop for the latest blog posts and replaced it by using the Genesis Featured Widget in the Home Featured 1 section (making sure to remove Home Featured 2-4) to achieve the 1 column look.

Now the issue I'm running into is that for the life of me, I can't figure out how to get the white padding around the single column of text on the homepage to extend all the way to the right and left instead of showing the background image behind it.

Any thoughts? Thanks in advance!

[Lauren @ OnceCoupled]

Cool, removing the grid loop is what I would have suggested, too.

As for CSS, here's your culprit:

.full-width-content .site-inner {
	max-width: 50%;
	margin: 0 auto;
}

Change that to 100%!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[kzoll]

Yes! That does the trick... I guess I should have been more specific. So, I'm trying to achieve 2 goals:

1. On the home page, 1 column, centered, where the text fills 50% width, but the white padding has ~270px of white space on either side, right and left;
2. On single posts, achieving that same look: 1 column, centered, where the text fills 50% width, but the white padding has ~270px of white space on either side, right and left.

My Default Layout is set to Full Width for posts and pages. Initially when I did this, it made my Full Width posts/pages look how I wanted, but screwed up the home page:

.full-width-content .site-inner {
	max-width: 50%;
	margin: 0 auto;
}

So I did this, and now I'm getting the opposite effect: looks perfect on the home page, but too wide on single posts:

.full-width-content .site-inner {
	max-width: 100%;
	margin: 0 auto;
	padding-right: 270px;
	padding-left: 270px;
}

The back and forth of trying to get it right on BOTH the home page and single posts is driving me batty!

[kzoll]

I FINALLY figured it out. Added this to my stylesheet to achieve the same skinny single column effect on single posts only:

.single .site-inner {
	max-width: 50%;
	margin: 0 auto;
	padding-right: 270px;
	padding-left: 270px;
}

Then changed my previous code

.full-width-content  .site-inner {
	max-width: 100%;
	margin: 0 auto;
	padding-right: 270px;
	padding-left: 270px;
}

to

.home-featured .site-inner {
	max-width: 100%;
	margin: 0 auto;
	padding-right: 316px;
	padding-left: 316px;
}

so the skinny 1 column effect appears on the home page, but NOT other full-width pages. (Tweaked the padding so it comes pretty close to the way single posts appear, too.)

Thanks Lauren, for all of your help - it might not seem like you did anything, but your note triggered the entire thought process I needed to arrive at my solution. Thank you! Feel free to mark this thread RESOLVED.

[Lauren @ OnceCoupled]

I would recommend changing your padding to percentages... you don't know what screen size your readers will have.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[kzoll]

Good idea - thank you!

[Author]

Posts