Support » Fixing WordPress » Changing default content width in Twenty Seventeen

  • I wonder if someone can help. I changed the default from two column to one column and I now have too much white space. I looked at the documentation and I tried changing the “content_width” in functions.php to change the main content area but it did not seem to work. The default content width was 525 and I set it to 1200 but it did not seem to work.

    An ideas?

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator t-p

    (@t-p)

    I recommend asking at https://wordpress.org/support/theme/twentyseventeen so the theme’s developers and support community can help you with this.

    MarGeo

    (@margeo)

    Try this, add the code to the customizer css

    .wrap {
    /* margin-left: auto; */
    /* margin-right: auto; */
    max-width: 80%;
    /* padding-left: 2em; */
    /* padding-right: 2em; */
    }

    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 80%;
    /* padding-left: 3em; */
    /* padding-right: 3em; */
    }
    }

    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    max-width: 80%;
    }

    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap
    {
    max-width: 80%;
    }
    }

    .has-sidebar #secondary {
    width: 26% !important;
    }

    .site-info { display: none; }

    this code worked for me but only for “posts”. hard time trying to google related info on how to change “Page” width (global, not just frontpage/static page)

    is there a different code for ‘Pages” available? (width edit)

    i use WP Twenty Seventeen theme.

    thanx in advance peeps 🙂

    alx

    Alx,

    I’m using a (slightly) modified version of @margeo ‘s code and I believe it’s working well on my pages. See if this helps:

    .wrap {
    max-width: 85%;
    }
    
    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 85%;
    }
    }
    
    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    max-width: 85%;
    }
    
    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap
    {
    max-width: 85%;
    }
    }
    
    .has-sidebar #secondary {
    width: 26% !important;
    }
    
    .site-info { display: none; }
    

    Make sure you put this in the Additional CSS section of the theme customize area.

    hi,

    tried this but it seemed to make width smaller. (padding maybe?) thanx for replying though. i basically set the theme back to default settings and will most likely change blog theme.

    cheerz,
    aap

    Hey, this worked great for me, thanks!

    Hy, nice code.

    Now my H5P timeline looks much better!

    Many thanx

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Changing default content width in Twenty Seventeen’ is closed to new replies.