Need help with Genesis Sample – adjust column and sidebar width

[tanhw]

Hi all

I'm trying to customize the Genesis Sample theme.

Please see the attached screenshots.

The default for the theme is as follows:
- "content" container is 880px.
- "sidebar-primary" container is 360px.

I wanted to fit both the content and sidebar containers into a "site-inner" of 1020px, but with:
- "content" container reduced to 680px.
- "sidebar-primary" container widened to 300px.
- There's some padding I believe of 40px between the two so I thought 680 + 40 + 300 = 1020 px and it's ok.

I applied the following "Additional CSS" to the theme's customization.

My laptop version looks fine (Screenshot1.jpg).
However, on my iPhone 7, I cannot (for the life of me) understand why the sidebar is skewed and aligned to the right. How do I center that sidebar and keep it at 300px in the phone? See Screenshot2.jpg.

Thanks - any help is greatly appreciated as I've struggle with this for days on end. Even tried to use Page Builders like Beaver Builder but my preference is really to use the stock, default Genesis theme and edit the CSS.

P.S. The screenshots are here:
http://www.project-skills.com/wp-content/uploads/2018/03/Screenshot2.jpg
http://www.project-skills.com/wp-content/uploads/2018/03/Screenshot1.jpg

http://www.project-skills.com/wp-content/uploads/2018/03/Screenshot2.jpg

[Sridhar Katakam]

Try adding this in your custom CSS:

@media only screen and (min-width: 1024px) {
	.content {
		width: 680px;
	}

	.sidebar-primary {
		width: 300px;
	}

	.site-inner {
		max-width: none;
	}

	.content-sidebar-wrap {
		display: flex;
		justify-content: center;
	}

	.content-sidebar .content,
	.sidebar-primary {
		float: none;
	}

	.sidebar-primary {
		margin-left: 40px;
	}
}

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts