Fit to one page webpage

• 

  misscharliejcircus · Member · Oct 28, 2015 at 11:15 pm

  • Copy link
  • Add topic to favorites

  Hi my I used syntax theme for my website but I can’t figure out how do I make my webpage fit in one screen without scrolling. Here’s the link http://charliejcircus.com/ I hope somebody can help me. Thanks!

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

• 

  timethief · Member · Oct 28, 2015 at 11:31 pm

  • Copy link

  That’s not the way blogs operate.

• 

  timethief · Member · Oct 28, 2015 at 11:33 pm

  • Copy link

  To view how your blog displays in multiple different devices see here http://www.responsinator.com/?url=http%3A%2F%2Fcharliejcircus.com%2F

• 

  misscharliejcircus · Member · Oct 29, 2015 at 12:51 am

  • Copy link

  But my problem is, I have a lot of white space so I want it to fit in one page if possible. Is it possible by using CSS?

• 

  timethief · Member · Oct 29, 2015 at 12:53 am

  • Copy link

  Probably but I don’t help with CSS editing. Please wait for another Volunteer or Staff to help you with this.

• 

  misscharliejcircus · Member · Oct 29, 2015 at 12:55 am

  • Copy link

  My problem is I have a lot of white space in it so I need on how to make it fit into one page without scrolling…is it possible in CSS revisions?

• 

  misscharliejcircus · Member · Oct 29, 2015 at 12:55 am

  • Copy link

  thanks anyway!

• 

  timethief · Member · Oct 29, 2015 at 1:12 am

  • Copy link

  Not to worry as there are Volunteers who do answer CSS questions and if they don’t answer then Staff will. :)

• 

  thesacredpath · Member · Oct 29, 2015 at 6:56 am

  • Copy link

  Hi there, a lot of the elements on the main page of your site have top margins, or top padding. We can help you to adjust those, but the one thing to remember is that not everyone has the same height of monitor, or has their browser windows set to full height, so we may be able to get it to show as one page on your monitor, but it may not show that way for everyone. My laptop is 900px tall, but I seldom have my browser window set full height. Also, I have a 27″ desktop monitor, which is 1600px tall, but again, I seldom have my browser set to full height on the large monitor.

  To adjust the spacing below the header, add the following and adjust the top margin value.

  .site-main {
      margin-top: 58.4px;
  }

  You can further move up the content by adjusting the top padding on content-area with the following.

  .content-area {
      padding-top: 36px;
  }

  You can additionally tighten up that space by adjusting the top padding on .hentry.

  .hentry {
      padding-top: 30px;
  }

  The entry content also has some bottom margin between the content and the sharing which you can adjust with this, and some bottom padding between the follow me on and content.

  .entry-content, .entry-summary {
      margin-bottom: 30px;
      padding-bottom: 30px;
  }

  There is also some bottom margin on the widget area which you can adjust with this.

  .widget-area {
      margin-bottom: 30px;
  }

  Adjust all those and see if that gets you what you want.

• 

  misscharliejcircus · Member · Oct 29, 2015 at 11:09 pm

  • Copy link

  Thanks for your suggestions, I already tried those but it doesn’t change anything :-(

• 

  thesacredpath · Member · Oct 30, 2015 at 4:33 am

  • Copy link

  Hi there, you need to edit the margins and paddings in those CSS rules. What I gave was the original values. Replace what I had given you with the following, which sets all of them to 0.

  .site-main {
      margin-top: 0;
  }
  .content-area {
      padding-top: 0;
  }
  .hentry {
      padding-top: 0;
  }
  .entry-content, .entry-summary {
      margin-bottom: 0;
      padding-bottom: 0;
  }
  .widget-area {
      margin-bottom: 0;
  }

  We can also add the following which take away more.

  .widget-area .sidebar-1, .widget-area .sidebar-2, .widget-area .sidebar-3 {
      margin-bottom: 0;
  }
  .site-footer {
  margin-top: 0;
  margin-bottom: 0;
  }
  .hentry::after {
      margin: 0;
  }
  .hentry {
      padding-bottom: 0;
  }
  .site-footer .widget {
      margin-bottom: 0;
  }

• 

  thesacredpath · Member · Oct 30, 2015 at 4:36 am

  • Copy link

  The main page of your site now fits in a 1050px height.