How do i make website full width?

  • sruddy

    (@sruddy)


    4 years ago

    I have taken over a website https://santarosaphotographicsociety.org/ and I want to make the whole site full pager width. The twenty Fourteen theme they used doesn’t have format settings. I tried writing the following code fora sample page but it didn’t work.

    .page-id-2393 .site-inner, .page-id-2393 .site-footer {
    max-width: none !important;
    width: 95% !important;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator threadi

    (@threadi)

    4 years ago

    .site, .site-header { max-width: 100%; }

    But: this doesn’t necessarily look good in my eyes. Sure, the page is 100% wide, but the content is difficult to read. For desktop resolutions I would still recommend:

    @media screen and (min-width: 1200px) {
.header-main {
  width: 1200px;
  margin: 0 auto;
}
.main-content {
  float: none;
  width: 1200px;
  margin: 0 auto;
}
}

    But of course it’s your decision 🙂

    Thread Starter sruddy

    (@sruddy)

    4 years ago

    Thank you! I used the first code for 100% now all I have to do is make the body margins and or padding so the content area is narrower and centered like on my website. https://steveruddyphotography.com/ Unfortunately I don’t see any settings available for that in the theme customizer.

    Moderator threadi

    (@threadi)

    4 years ago

    The second code I wrote above allows you to do just that. You can of course adjust the values for the width to your requirements.

    Thread Starter sruddy

    (@sruddy)

    4 years ago

    Oh Nice! I thought it was either or so I pasted all the code then altered the widths. This looks better but can I get the carousel slideshow full width and add padding to content area? Here is how it looks after your code and my specs.
    https://santarosaphotographicsociety.org/

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

The topic ‘How do i make website full width?’ is closed to new replies.