FULL-WIDTH PAGE

• 

  xyzagerondio · Member · Jul 14, 2016 at 3:31 pm

  • Copy link
  • Add topic to favorites

  Hello!

  I would like to adjust my page/s to full-width. Could someone help me with some CSS please… It was successfully adjusted with my blog posts.

  Kindly help!

  Click here to see what I’m talking about >>> https://xyzagerondio.com/about/

  Thanks! :)

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jul 14, 2016 at 6:29 pm

  • Copy link

  Hi, this will take your content full width (less right and left padding) on static pages on Twenty Fourteen.

  .page .entry-content {
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
  }
  img.size-full, img.size-large, .wp-post-image, .post-thumbnail img {
      width: 100%;
  }

  One thing I always mention in cases like this is that in general, it is best to keep text-based content to between 500 and 750 pixels in width for readability. Much wider than that, and it becomes more difficult for a reader’s eye to move from the end of one line to the beginning of the next.

  You can change the max-width in the above from 100% to 750px and see what you think. It was originally 474px in width.

• 

  xyzagerondio · Member · Jul 15, 2016 at 3:58 am

  • Copy link

  Hi thesacredpath, it works! I did change it to 750px because I like it more that way. Thank you very much! :)

  Can I add one more thing please…? I’ve discovered that the Twenty Fourteen theme when I open my website in my laptop, there’s a space in the side. I mean, the theme itself isn’t full-width. Can I do something about it?

  Kindly help please….

  Thanks! :)

• 

  thesacredpath · Member · Jul 15, 2016 at 6:51 am

  • Copy link

  To make Twenty Fourteen full width, all the time – even on 2500px wide monitors – you can add the following.

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

• 

  xyzagerondio · Member · Jul 24, 2016 at 1:48 pm

  • Copy link

  Wow! It works!!! Thank you so much again & again thesacredpath! :)

• 

  thesacredpath · Member · Jul 25, 2016 at 8:00 am

  • Copy link

  You are welcome.