White space on home page

  • Unknown's avatar

    I know this is a topic that has been addressed to death, but I can’t seem to find a solution for the page I’m working on. Let me first say I’m not any kind of design expert but I agreed to create a charity page for a friend of friend. I’m using the Woo Commerce theme, with just the standard home page template. There is a TON of white space above the footer and below the last design element and I’ve tried 100 ways of designating margins and borders and padding at 0 and I can’t seem to get rid of it.
    The problem is definitely with my added CSS. The client requested the title not be on the front page, so I moved the image up using relative positioning to cover the white space there. As a result, I had to move all the elements up, for which I created additional classes. After removed each of the classes line by line, I found this one to be creating all of the extra space:

    div.textrepo {position: relative; top: -480px;}

    but if I remove it, it sets off the alignment of every element on the page and I have put so much work into it at this point, I really do not want to start from scratch.


    I obviously don’t know enough to understand why this is occurring for this and only this line when I have others like this:
    div.buttonrepo {position: relative; top: -600px;}
    div.imgrepo {position: relative; top: -70px;}

    So if someone could explain to me what I have done wrong here, I would love to understand, and if anyone could explain how to fix it, I would be eternally grateful.

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

  • Unknown's avatar

    Solved it. It might not be how anyone would have recommended, but I added a margin-bottom: – value and that did the trick.

  • The topic ‘White space on home page’ is closed to new replies.