Remove gap between top of page and banner on a landing page

• 

  alphablocksnursery · Member · Aug 26, 2015 at 4:05 pm

  • Copy link
  • Add topic to favorites

  Hi CSS pros,

  On the site’s static homepage I have a call-to-action banner (initially I wanted a carousel of banners there but it’s not possible with my theme apparently)

  But there is a large gap between the top of the page and the banner, which ends up being rendered on or just below the fold on a laptop or tablet device.

  How could I make sure the gap between the top of page and the banner is minimal?

  Thanks!

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

• 

  g471n · Member · Aug 26, 2015 at 4:23 pm

  • Copy link

  Hi alphablocksnursery

  This custom CSS should work for you.

  img.aligncenter.size-full.wp-image-246 {
      margin: 0px;
  }
  
  header.entry-header {
      display: none;
  }
  
  article#post-241 {
      padding-top: 0px;
  }

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save. You can only preview custom CSS on the free plan.

• 

  alphablocksnursery · Member · Aug 26, 2015 at 4:31 pm

  • Copy link

  Great thanks g471n

  And how can I make this appear right in the middle of the screen?

  I removed the rhs column so now there is only the page. But the banner seems to be on the left of the screen.

  Thanks

• 

  alphablocksnursery · Member · Aug 26, 2015 at 4:35 pm

  • Copy link

  Also, seems that all the page titles have been removed from all pages, while I wanted that only for the HP, so I have used this code right above the one you sent me:

  .page-id-241 .entry-title {
  visibility: hidden;
  }

• 

  g471n · Member · Aug 26, 2015 at 4:52 pm

  • Copy link

  Try this.

  img.aligncenter.size-full.wp-image-246 {
      margin: 0px;
      display: inline-block;
  }
  
  .page-template-nosidebar-page-php .site-content {
      margin: 0px;
      text-align: center;
  }

• 

  g471n · Member · Aug 26, 2015 at 5:05 pm

  • Copy link

  Also, seems that all the page titles have been removed from all pages, while I wanted that only for the HP, so I have used this code right above the one you sent me:

  .page-id-241 .entry-title {
  visibility: hidden;
  }

  Rather change:

  header.entry-header {
      display: none;
  }

  To:

  .page-id-241 .entry-header {
      display: none;
  }