Full Width Service Pages

Hi,

I’ve got my services using the ‘Single Service’ template and all is working fine on the homepage, but I would like it when clicking through to the service page that it would be full width.

I’ve got other (non-service) pages using the full width template perfectly but I’m guessing there is something I should changed in my child theme to make the single service template using the full width.

Advice appreciated please.

Hello Dwain,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

body.page-template-single-service div#primary {
    width: 100%;
}

body.page-template-single-service aside#secondary {
    display: none;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Perfect, thank you.

You are welcome Dwain,

Kind Regards, Roman.

This will remove sidebar, centre everything, and bold the links:

*[class*='page-template-single-'] #main, .page-template-default #main {
	max-width: 70%;
	margin: auto;
}

*[class*='page-template-single-'] .hentry, .page-template-default .hentry {
	border: none;
}

*[class*='page-template-single-'] .container .content-area, .page-template-default .container .content-area {
	width: 100%;
}

*[class*='page-template-single-'] #main a, .page-template-default #main a, .page-template-page_fullwidth #main a {
	font-weight: bold;
}

Hi Roman, I have tried applying this to both custom CSS and in additional CSS with no effect. Does the single service page text need to be removed from its container?

body.page-template-single-service div#primary {
    width: 100%;
}

body.page-template-single-service aside#secondary {
    display: none;
}

The website is www.aptareconsulting.com

BR

I think this fixed it:

body div#content > div.container {
    width: 100%;
}

@media only screen and (min-width: 992px) {
    div#primary {
        width: 70%;
    }

    aside#secondary {
        width: 30%;
    }
}

Okay, it’s great that your issue is fixed!

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.

1 Like