Changes to Expand the Prose Child Theme

[DragonTom]

I've been working on trying to change the Prose child theme from the 970 pixels as default to 1200 pixels. Have to say that the project has involved much examination of pages using Firebug (Firefox plug-in), recording widths, and computing. I have gotten things to where I can live with the changes for a bit until I can figure out how to refine the CSS.

To change 970 pixels to 1200 pixels (+230 pixels) here is the code you have to put into the Genesis Custom Code Custom CSS area...

body {
   width: 1200px;
}

#inner {
   width: 1130px;
}

#content-sidebar-wrap {
   width: 960px;
}

#content {
   width: 650;
}

.content-sidebar #content,
.sidebar-content #content {
   width: 820px;
}

.full-width-content #content {
   width: 1130px;
}

.page-template-landing-php #content {
   width: 910px;
}

.footer-widgets-1 {
   width: 360px;
}

.footer-widgets-2 {
   width: 365;
}

.footer-widgets-3 {
   width: 360px;
}

#footer .creds {
   width: 965;
}

@media only screen and (max-width: 1190px) {

	body,
	.content-sidebar-sidebar #content,
	.content-sidebar #content,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.full-width-content #content,
	.page-template-landing-php #content,
	.page-template-landing-php #content-sidebar-wrap,
	.sidebar-content #content,
	.sidebar-content-sidebar #content,
	.sidebar-sidebar-content #content,
	#content-sidebar-wrap,
	#footer,
	#footer .creds,
	#footer .gototop,
	#footer-widgets,
	#header,
	#nav,
	#sidebar,
	#sidebar-alt,
	#subnav {
		width: 100%;
	}

	#header {
		padding: 10px 0;
	}

	#header .widget-area,
	#title-area {
		width: 100% !important;
	}

	#title-area #description,
	#title-area #title {
		padding: 0 !important;
	}
	
	#title-area #title {
		line-height: 1.0;
		margin: 0 0 10px;
	}
	
	#header .widget-area {
		padding: 10px 0 0 !important;
	}

	#wrap {
		border: none !important;
		margin: 0 !important;
		width: auto;
	}

	#inner {
		padding: 10px;
		width: auto;
	}

	#description,
	#footer .creds,
	#footer .gototop,
	#title,
	#title-area {
		float: none;
		padding: 0;
		text-align: center;
	}

	#header .searchform {
		float: none;
		margin: 0 0 20px;
		padding: 0;
		text-align: center;
	}

	#nav li.right {
		display: none;
	}

	.enews #subbox,
	.s {
		width: 60%;
	}

	#footer p {
		padding: 0 10px;
	}

}

By comparing the default CSS with the above you can see where I had to add the 230 pixels or some percentage of them. I know others have been trying to do this so I hope this helps.

The header image is off to the right a bit and does not reduce as the page width decreases but most of the other stuff seems to work OK -- or at least OK enough to get by for now. I'll let the wizards here refine the above for everything; e.g., there is code in the style sheet that covers a few things I don't use so I have not bothered figuring that out. That's an exercise left to the reader. 🙂

Tom

http://missiontour.org/wp/

[SavvyJackie]

Hi,
I noticed several of the values are missing the px after them.

For example:

#content {
   width: 650;
}

should be:

#content {
   width: 650px;
}

That may be affecting the results as those values are ignored.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[DragonTom]

You are correct. Three instances. Thank you for pointing that out. Guess I was just too excited to actually have something work that I did not notice.

Making the change to add the "px" to the three values, however, did not seem to have any visual effect on any of my sites. 🙂

Tom

[SavvyJackie]

It may not have any effect, but one issue I sometimes have is the browser cache - I think I am looking at the updated version, only to refresh the browser and/or clear cache to see the results change.

Hope that helps.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Author]

Posts