White Space top and bottom of static pages


#1

Hi,

Thank you for the Sydney theme.

Whenever I create a static page, I have white space at the top and bottom. I tried getting rid of it using this custom code I found in a different post:

.page-wrap {
    padding-bottom: 0px;
}
.page-wrap {
    padding-top: 0px;
}
.page-wrap {
    padding: 0px 0px 0px;
    clear: both;
}

It did shrink a bit but not all of it. Can you help me with that?
http://jh.domaineludique.com/chorale/3/repertoire/

Thank you!


#2

Oh! and I forgot: I added a background image in the visual editor’s row settings but for some reason, it shows darker on the website and I couldn’t find a setting for that.

Thanks!


#3

Hi,

I just checking your site and I think some of theme should has different css code.

Use this for all page that has fullwidth setting:

.page-template-page_fullwidth .page-wrap .content-wrapper .page-wrap .content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

.page-template-page_fullwidth .page-wrap .content-wrapper .overlay {
    background-color: transparent;
}

Here is use for this page http://jh.domaineludique.com/chorale/3/un-par-un/:

.page-id-8 .page-wrap .content-wrapper .row {
    margin-top: -30px;
    margin-bottom: -50px;
}

and here is used for this page http://jh.domaineludique.com/chorale/3/repertoire/

.page-id-18 .page-wrap .content-wrapper .row {
    margin-top: -30px;
    margin-bottom: -50px;
}

#4

Thanks for your reply!

This is great. The images are no longer dark. However, the white space is still there at the top and bottom.

I’ve entered everything in the Custom CSS plugin. Is that the right way to do this?

Another thing I noticed is that the menu is not sticky on the static pages but it is on the homepage. Any way to have it sticky everywhere?

Thanks again


#5

Hi,
Sorry, from the code above, can you change:

.page-template-page_fullwidth .page-wrap .content-wrapper .page-wrap .content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

to

.page-template-page_fullwidth .page-wrap, .page-template-page_fullwidth .page-wrap .content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

and for the sticky menu, maybe this can help https://athemes.com/forums/topic/sticky-menu-4/


#6

Thanks a lot. It worked. Pictures are no longer dark, no more white space and the sticky menu works on the static pages too. There was a tiny part of white space left but I used this code from a different post and it worked:

.page-wrap {
    padding-bottom: 0;
}
.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {
    padding-bottom: 0;
}
.content-area .hentry {
    padding-bottom: 0;
}
footer.entry-footer {
    display: none;
}

I didn’t keep the last part though, because the footer was then hidden.

Awan, you’ve been an awesome help.

Some other stuff:

1- For some reason, the header has two colors: about 1/3 at the top is dark grey and the rest is black. The grey disappears when scrolling down.

2- The top of the blog page is under the menu. I cannot display the post title.
http://jh.domaineludique.com/chorale/3/nouvelles/
I tried with Chrome, IE and Firefox, all the same. The only one displaying this right is Opera. Any chance you know how to fix this?

3- On the home page, the call to action button displays properly on Chrome, Firefox and Opera, but not on IE (11.0.9). It shows on the right side like I want to, but it’s in the middle instead of the bottom. Wonder why.

Here is all the CSS code I have in the plugin so far:

.page-template-page_fullwidth .page-wrap, .page-template-page_fullwidth .page-wrap .content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}
.page-template-page_fullwidth .page-wrap .content-wrapper .overlay {
    background-color: transparent;
}
.page-id-8 .page-wrap .content-wrapper .row {
    margin-top: -30px;
    margin-bottom: -50px;
}
.page-id-18 .page-wrap .content-wrapper .row {
    margin-top: -30px;
    margin-bottom: -50px;
}
.page-wrap {
    padding-bottom: 0;
}
.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {
    padding-bottom: 0;
}
.content-area .hentry {
    padding-bottom: 0;
}
.roll-button {
  background-color: transparent;
  border: 1px solid #ffab00;
  color: #fff;
}
.roll-button:hover {
  background-color: #ffab00;
  border: 1px solid #ffab00;
  color: #fff;
}
.text-slider-section {
  top: initial;
  min-height: initial;
  bottom: -20px;
  left:  35%;
}
.social-menu-widget a, .social-menu-widget a:hover {
    color: white;
}
.site-header.fixed {
    position: fixed;
}
.home .site-header.float-header{
    padding: 5px;
}
.site-header.float-header {
    padding: 37px 0 5px;
}

Thanks again!


#7

Hello…

Okay, let me try to answer the question:

  1. Just checking your site again and I didnt get where is the grey. Can you take a screenshot for this?

  2. please try to add this code:

.page-template-default .page-wrap, .blog .page-wrap {
    margin-top: 140px;
}

@@media only screen and (max-width: 991px){
  .page-template-default .page-wrap, .blog .page-wrap {
    margin-top: 0;
  }
}
  1. I dont have IE 11. so I cant check this.

#8
  1. Sure. I’ve put the screenshots in this page.
    http://jh.domaineludique.com/chorale/3/repertoire/

The left image shows the grey bar at the top. The image on the right shows after I start scrolling.

This is in Firefox 42.0.

  1. Again, you’ve solved another problem. Awesome, thanks!

  2. Too bad. I’ll look for a solution somewhere else. Thanks.


#9
  1. I think that is not grey color. but white color that covered by the transparency of the header. can you show me the link where the page is? I already try to find the page but nothing.

  2. wait, I think I found more pages that need to has the code above.

Please change this code:

.page-template-default .page-wrap, .blog .page-wrap {
    margin-top: 140px;
}

@@media only screen and (max-width: 991px){
  .page-template-default .page-wrap, .blog .page-wrap {
    margin-top: 0;
  }
}

to:

.page-template-default .page-wrap, .blog .page-wrap, body:not(.page-parent) .page-wrap, .archive .page-wrap, .single-post .page-wrap {
    margin-top: 140px;
}

@media only screen and (max-width: 991px){
  .page-template-default .page-wrap, .blog .page-wrap, body:not(.page-parent) .page-wrap, .archive .page-wrap, .single-post .page-wrap {
    margin-top: 0;
  }
}

let me know if you find another which not displayed the title of the page/post

  1. I am sorry, can’t do nothing for that :slight_smile:

#10

Hi

I used your custom CSS for white stripe but its still there :frowning:
Can you look at this:

http://plastkar.nazwa.pl/druk3d/

I want to remove this white stripe at top :slight_smile:

Best regards
Kamil


#11

Hi Kamil,

I think its because you remove the header are. but to remove the space, you can try to put the css code below using simple custom css plugin:

.vc_row.wpb_row.vc_row-fluid {
    margin-top: -30px;
}

#12

Hi Awan,

  1. You can find an example here
    http://jh.domaineludique.com/chorale/3/un-par-un/sopranos/

or here
http://jh.domaineludique.com/chorale/3/un-par-un/altos/

  1. I tried your new code but I didn’t find that it made an improvement. In fact, it created a large white space on the home page. I kept the previous code and it looks fine. I’m curious to know which page you found that needed the code?

Thanks again!


#13

Thank You Awan, but it doesnt work :frowning:
Any another idea?

Best regards
Kamil


#14

O…i see that it works when i use “Front Page” template, but wont on “Full width” template


#15

@giaschel

  1. Like I said in early, that was not a grey color but white color and covered by the transparency of the header. and it appears because there is no header image for those section. (you can set it from Customize > Header area > Header type > Site header type: image

  2. sorry, there is missing code: please add this css code also:

.home .page-wrap {
    margin-top: 0 !important;
}

@kamil
Yes, its for the front page. I dont see there is another pages in your site. So, I can check it