Twenty seventeen won’t go full width

  • Resolved Tim Hupkes

    (@tim983)


    6 years, 8 months ago

    Hope someone knows where I go wrong.


    I have implemented several full width codes, on their own and even together (yes, I know that makes no sense). Used !important but to no avail. I cannot get twenty seventeen to go full width.


    Website I need help with:
https://www.timhupkes.com

    What I have used:

    
.wrap {
max-width: 100%;
}
    @media screen and (min-width: 48em) {
.wrap {
max-width: 100%;
}
}
    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
max-width: 100%;
}
    @media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap {
max-width: 100%;
}
}
    and also:


    .wrap { max-width: 1366px; }
    /*For Content*/
.has-sidebar:not(.error404) #primary {
width: 60%
}
    /*For Sidebar*/
.has-sidebar #secondary {
width: 30%
}
    /*Responsive*/
@media(max-width:768px) {
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 100%
}
    /*For Sidebar*/
.has-sidebar #secondary {
width: 100%
}
}

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Jarret

    (@jarretc)

    6 years, 8 months ago

    The following is for a default TwentySeventeen theme so you may need to undo the current customization that you have to get it to work

    .site-content .wrap {
	width: 100%;
	max-width: 100%;
}

.site-content .wrap .page-header {
	display: none !important;
	float: none !important;
	width: 0px !important;
}

.site-content .wrap .site-main article {
	width: 100% !important;;
	float: unset;
}

    If you still want the post/page title to be displayed, just use the first section of CSS for .site-content .wrap and omit the rest.

    Thread Starter Tim Hupkes

    (@tim983)

    6 years, 8 months ago

    @jarretc Thanks. I did this but unfortunately it doesn’t work. I’ve emptied cache and there is nothing in ‘additional css’. I made some print screens but can’t see where I could add those here.

    What it does do is make my header image full width&full page (which is also something i wanted) but as far as post/pages go, there’s a large portion of white still on the left side…

    Jarret

    (@jarretc)

    6 years, 7 months ago

    Based upon what you have on the live site right now, add the following to what I already provided, testing on the live site it appears to work for me

    body.page-two-column:not(.archive) #primary .entry-header {
  width: 0px;
  float: unset;
}

body.page-two-column:not(.archive) #primary .entry-content {
  width: 100%;
}
    Thread Starter Tim Hupkes

    (@tim983)

    6 years, 7 months ago

    @jarretc Thanks! It works fine. 🙂

    treehstn

    (@treehstn)

    6 years, 7 months ago

    I’m also trying to get this to work and cannot seem to get the pages to go full width. Here is the site I’m working with:

    http://blog.outlanderskeep.com/

    Forgot to mention that I added both groups of css edits suggested previously in this thread. They had no effect. Any help would be great!

    (I’m hoping my post isn’t considered hijacking… If it is I’ll remove it… thanks!)

    • This reply was modified 6 years, 7 months ago by treehstn.
    Jarret

    (@jarretc)

    6 years, 7 months ago

    @treehstn hi there! typically it is better to make a new support request if you have an issue, that way previous users in the thread don’t get emailed as well.

    That said, looking at your site right now the pages appear to be full width to me. Did you try using a different browser or clearing your cache as maybe you weren’t seeing the changes applied?

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Twenty seventeen won’t go full width’ is closed to new replies.