try adding this CSS to style.css of the child theme:
@media screen and (min-width: 48em) {
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-header
{
width: 100%;
}
}
if you don’t want to see the title ‘BLOG’, change it to:
@media screen and (min-width: 48em) {
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-header
{
display: none;
}
}
Hello Michael,
Thank you for your answers. I have tried using both but unfortunately it didn’t change anything. I am a newbie so I may have done something wrong. Here’s where I added the css to:
Twenty Seventeen Child: Stylesheet (style.css)
/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: Angela Jones Empowerment Ministries, LLC
Author URI: https://angelalifecoach.com/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.3.1503259898
Updated: 2017-08-20 20:11:38
@media screen and (min-width: 48em) {
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-header
{
display: none;
}
}
*/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You need to put CSS outside of the comment tags /* and */. Comment tags are there to describe content inside your CSS file. That’s why you see the paragraph “Description: Twenty Seventeen brings your site to life with…”.
Put your CSS here:
*/
@media screen and (min-width: 48em) {
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-header
{
display: none;
}
}
Andrew thank you for correcting my newbie mistake. I have placed the code in the correct spot and updated the file but it still refuses to display the full width of the page.
/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: Angela Jones Empowerment Ministries, LLC
Author URI: https://angelalifecoach.com/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.3.1503259898
Updated: 2017-08-20 20:11:38
*/
@media screen and (min-width: 48em) {
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-header
{
display: none;
}
}
please add the CSS back into style.css of the child theme;
to see the result, you might need to clear the browser cache – either by reloading the page (a few times) or whatever your browser needs…
or check in a different browser, in a different computer.
Hi Michael and Andrew,
First, thank you both for your help and patience. I see that the code is now working. I thought something was wrong because after changing it when I viewed my website in 2 different browsers outside of chrome nothing changed but now all is well (I use chrome, opera, and vivaldi at the same time on a regular basis). I’ll also remember to empty my internet cache when trying new code. As always I appreciate your help; people like you two make WordPress a non-scary software for a newbie like me.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’re welcome, thanks for asking too. This thread will also act as a tutorial for anyone who also wants to do the same thing in future, so thank you 🙂
.
