child theme overide

Can you elaborate on “but I’d like to narrow the page columns.” a bit more please?

Would that be the entire page or the page content area? – A link to the site would also be of great help.

Zulf

When I turn off Twenty-Fourteen extended, my childtheme controls the site. With it on, it doesn’t work.

The code I want to use is for pages only, and I tried with a.page and a.page-content:

margin-left: 120px;
margin-right: 120px

Btw, thanks for you help!

Website is https://www.school4schools.com

Thanks for the link – that has been of some help ??

You could try the following CSS code and see if it fits your needs – I’ve used .full-width as there’s no sidebar but you can omit to target pages with the sidebar. You can also omit some of the elements if you do not wish to target them.

Code:

.full-width .archive-header,
.full-width .comments-area,
.full-width .image-navigation,
.full-width .page-header,
.full-width .page-content,
.full-width .post-navigation,
.full-width .site-content .entry-header,
.full-width .site-content .entry-content,
.full-width .site-content .entry-summary,
.full-width .site-content footer.entry-meta {
	max-width: 1060px;
	width: 80%;
	margin: 0 auto;
}

Let me know how that goes.

Regards,
Zulf

That did the trick! Now it presents me with the problem of how to have only my front page show 100% width and no margins.

I tried adding, but did not work:

.page-id-2 .site-content{
width:100%;
}

Finally resolved the front page width v. site pages width dilemma.

My goal was for my full width (static, pages based, no posts) site to have separate widths for the main page banner images (100% with no margins or padding) and all text and other pages to have a set narrower page width.

My resolution was:

1. Set width in Twenty-Fourteen customizer content settings at 700px

2. Add code for home page only in the childtheme style.css:

.home .site-content .entry-content,
.home .site-content .entry-summary {
max-width: 1024px;
width: 100%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}

3. This now overrides the default page width for the home page only.

4. The next problem is that the text margins in my homepage are now also full-width (which I want for my images but not for my text), so I added the html tags below my banner images for the text as:

<div id=”primary” class=”page” style=”margin-left: 105px; margin-right: 105px;”>

I will use those tags to change width on specific pages where I want 100% width content for images or columns, etc.

5. I also wanted the page titles to be 100% width on all pages, including the homepage, so I added to the childtheme style.css:

.full-width .site-content .entry-header {
max-width: 1024px;
width: 100%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}

and to change the page title background color:

.entry-title {
background-color: #24890d;
color: #ffffff
}

I’m sure this is bulky and not a best practices solution, but it’s the best this non-coder came up with. I hope someone else finds it useful.