Too much white space above & below CSS – Watson Theme

  • Author
  • #2496443

    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



    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 Premium Plan for custom CSS to save.


    Hi g471n.

    I tried that, but nothing changed.



    Can someone help me. I have Mystile theme. I have too much space between submenus (vertical space) . How can I fix that?
    Regards Ola



    Hi Ola

    Please start a new thread with your question.



    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.




    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!


    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;


    Yes! You are my hero TheScaredPath…

    That worked beautifully!!!



    Super and you are welcome. :)


    sorry…The”Sacred”Path… not scared ;)


    No worries, it happens. :)

The topic ‘Too much white space above & below CSS – Watson Theme’ is closed to new replies.