CODEWITHSUNDEEP
phphtmlcss
RodrigoDC
RodrigoDC

Reputation: 31

How to remove the bottom margin of page using CSS

Please see this page:

http://artezanatostudio.com/index.php

Notice that at the bottom there is a margin below the footer bottom line. Thus far, all my efforts to get rid of it have failed. I have attempted to use:

body, html { margin: 0; padding: 0; }
#footer { margin: 0; padding: 0; }

I even tried:

#footer { margin: -50px; }

All to no avail.

While the page has many CSS files, the two important ones that I am editing to try to remove the bottom space are the following

site_above/includes/templates/zenn/css/style.css

and

site_above/includes/templates/zenn/css/style-ci.css

If you can provide any clues to assist me it would prevent me from going bold prematurely and you will have the satisfaction that you helped someone who was going mad.

Thanks in advance.

Upvotes: 3

Views: 17909

Answers (8)

MrDevel
MrDevel

Reputation: 168

Of course there could be a better solution, but for the moment you could try:

#footer {
    overflow: hidden;
}

Upvotes: 0

Ms. Nobody
Ms. Nobody

Reputation: 1219

You are able to see this very easily by yourself.

If you are using Mozilla Firefox/Chrome:

  1. Right click on the element that you have issue with
  2. Select the last option - Inspect element (or something similar to it)
  3. Start hovering over the elements in the code that popped up to see what makes the additional space appear there!

As you go trough the relevant css styles that appear on right side, you will soon find out where is some additional margin.

Which is in this case as everyone already mentioned in the element div.row:

div.row {
    font-family: MuseoSans-Reg,Verdana,Geneva,sans-serif;
    color: #7F7F7F;
    margin-bottom: 26px;
}

Hope it helped a little!

Upvotes: 0

mencina
mencina

Reputation: 68

On your <div class="row"> inside your <div id="footer"> remove that margin-bottom: 26px;

Upvotes: 0

Lal
Lal

Reputation: 14810

Please remove margin-bottom: 26px; from Style-ci.css (line no: 86)

ie change your div.row css as follows

div.row {
       font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
       color: #7f7f7f;
}

Upvotes: 0

dr_js
dr_js

Reputation: 1

Inside your footer there is a div with class row. It has a margin-bottom with 26px. Remove this value and your issue is fixed.

div.row {
   font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
   color: #7f7f7f;
}

You could also set it to zero but if it's not necessary I suggest you to remove it.

Upvotes: 0

BOMEz
BOMEz

Reputation: 1010

Try this:

div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-bottom: 0px;
}

They key here is that margin-bottom was changed to 0px.

Do you use a browser with a decent web inspector? I was able to pinpoint it in under 10 seconds using the Chrome web developer console.

Upvotes: 0

wormonic
wormonic

Reputation: 86

    #footer > div.row {
       margin-bottom: 0px;
    }

Upvotes: 7

GifCo
GifCo

Reputation: 1363

The style sheet the issue is coming from is style-ci.css and the speciifc rule is on the .row div.

Remove:

div.row{
    margin-bottom: 26px;
}

and make it margin-bottom: 0px;

Note: this is really easy to figure out using Chrome dev tools!!

Upvotes: 0

Related Questions