Too much white space above & below CSS – Watson Theme

michaelglancyglassworks · Member · Nov 9, 2015 at 9:37 pm
Copy link

Add topic to favorites
Can someone help me cut down and even up the amount of white space above and below the CSS on my homepage?

It was fine for over a year, and then recently (perhaps something was changed in the theme) the white space became uneven and too large, especially if you are viewing the page with a small size screen. I think 1″ above and below would be optimal…

Thank you (in advance)!

The blog I need help with is: (visible only to logged in users)
g471n · Member · Nov 9, 2015 at 9:46 pm
Copy link
Hi Michael

Try adding this line of custom CSS.
```
@media screen and (min-width: 900px)
#container {
    padding-top: 1rem;
}
```
To add custom CSS

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.
michaelglancyglassworks · Member · Nov 9, 2015 at 10:28 pm
Copy link
Hi g471n.

I tried that, but nothing changed.

:(
nettobutikken · Member · Nov 10, 2015 at 10:38 pm
Copy link
Hello.
Can someone help me. I have Mystile theme. I have too much space between submenus (vertical space) . How can I fix that?
Regards Ola
g471n · Member · Nov 11, 2015 at 5:07 am
Copy link
Hi Ola

Please start a new thread with your question.
g471n · Member · Nov 11, 2015 at 5:15 am
Copy link
Hi Michael

Can you confirm that you have the Premium Plan.

Please also confirm that it is the white space above and below your logo and header that you are wanting to reduce.

Thanks,

Gavin
michaelglancyglassworks · Member · Nov 11, 2015 at 6:22 pm
Copy link
Hi Gavin (g471n).

Yes. I have a small business package which comes with the Premium Plan benefits, including chat help.

The folks at chat support have referred me to this CSS forum.

The white space I am referring to is on my home page, above and below the slide show image (in the middle of the page, pics change every few seconds).

The white space is far too big (and uneven above and below) as I can not see the entire homepage on my 13″ MacBook screen.

The issue is most prevalent with the desktop version of the site. The spacing looks OK on the smartphone and tablet versions.

Any help would be very much appreciated!
thesacredpath · Member · Nov 11, 2015 at 7:38 pm
Copy link
Hi there, add the following CSS to the end of your custom CSS and see what you think. It appears to work well on tablets, phones and desktops, but please verify and let me know.
```
body.home div.slideshow-window * img {
    top: 0 !important;
    transform: translateY(0px) !important;
}
body.home div.slideshow-window {
    padding-bottom: 30% !important;
}
```
michaelglancyglassworks · Member · Nov 11, 2015 at 7:52 pm
Copy link
Yes! You are my hero TheScaredPath…

That worked beautifully!!!

:)
thesacredpath · Member · Nov 11, 2015 at 7:53 pm
Copy link
Super and you are welcome. :)
michaelglancyglassworks · Member · Nov 11, 2015 at 7:54 pm
Copy link
sorry…The”Sacred”Path… not scared ;)
thesacredpath · Member · Nov 11, 2015 at 8:07 pm
Copy link
No worries, it happens. :)

No items found.