Image Padding Bottom

[Porter]

I have an image on my home page, which I've inserted via the text widget. It has a few pixels of bottom padding, which I can't seem to pinpoint. I have a shadow-box which I added myself, but I've removed that and it doesn't seem to be the cause. Any ideas?

anightinburlington.com

EDIT

I've discovered it's caused from my .body css. I created a widgetized home page, but it seems my body css is still present, how do I go about disabling that?

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

I created a front-page.php file, hoping that an empty template would remove it, no luck. I tried adding an echo of:

echo("I'm the front page");

And the padding disappears... I have no idea why.

I've looked everywhere, but I can't figure out how to make my home page not contain the generic .body css. Adding that echo removed the effects of it (despite it still showing up in the inspector), but the proper solution seems to be to not have the body css on my home page. Any ideas how to achieve this, and why that echo solves the padding issue?

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[WisdmLabs]

Hi,
The space below the image is because of the line-height which the container DIV inherits from BODY.
To solve the issue and remove the space, add the below css:

.front-page-full-width-1 .textwidget  {
     line-height: 0;
}

---

http://wisdmlabs.com/

[Porter]

Awesome, that did the trick! I'm still not entirely sure how having logic with more than one class works, is it specific to only when those classes are used together, or would an either class use the logic if present? I should read up on that, as it's pretty basic.

That fix definitely works, but I'm still slightly concerned that other elements of my home page are "battling" against the basic .body css. I can definitely create custom code like above, but is there a way so that .body is never even used, just on my home page? It's entirely widgetized, aside from the header and footer, if that helps.

Either way, thanks for the quick answer to my main issue, much appreciated 🙂

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[WisdmLabs]

Hi,
The CSS selector which I have used represents the DIV with class 'textwidget' which is inside the DIV with class '.front-page-full-width-1'
So, '.front-page-full-width-1' is the parent DIV of '.textwidget' DIV. The purpose adding the parent DIV before the targeted DIV to make it sure that this CSS applies only on the front-page.

If we use only '.textwidget' as the selector, the CSS will be applied to all the text widgets on the entire website.

And to overwrite the css of 'body' on homepage, you can use the selector '.home' and give the required CSS properties to it. The class '.home' gets applied only on the homepage. So you can try the below code:

.home {
    //your CSS code
}

---

http://wisdmlabs.com/

[Porter]

Thanks for the explanation, makes sense.

In the case of my body code, I have this in my inspector:

body {
background: url('images/background-main.jpg');
color: #d8d8c0;
font-family: Muli, sans-serif;
font-size: 20px;
font-weight: 300;
line-height: 1.625;
margin: 0;
padding-top: 84px;
}

Half of that css has a line through it (not being applied to the page, I assume), but properties such as font-weight ARE being applied. This is intended, as the rest of my entire website uses everything contained in body, but on my front page, properties such as line-height interfere, and as you saw, I need to customize and set properties to 0, or none.

I tried simply adding an empy .home class (in hopes it would simply override everything), but that didn't work. I also tried the same, with body.home. It's really not a big deal, as I can customize the 5 or so widget areas each with a class, but for the sake of logic, I'm curious to know if there is a proper way to ignore everything in body, just on my home page.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[WisdmLabs]

Hi,
I checked out your site link and can see the empty '.home' class in your CSS. However, you will have to write the properties you want to overwrite in it. An empty class doesn't overwrite anything.

Example: If you want to overwrite the background property of 'body', write the below CSS:

.home {
    background: #5e8cba;
}

In order to ignore all the body properties, you will have to overwrite all its properties using the '.home' class.

---

http://wisdmlabs.com/

[Porter]

Alright, that's what I figured. Thanks for all of the info, and the level up on my css knowledge 😀

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[WisdmLabs]

You are most Welcomed... 🙂

---

http://wisdmlabs.com/

[Author]

Posts