Image Padding Bottom

Community Forums Forums Design Tips and Tricks Image Padding Bottom

This topic is: resolved

This topic contains 8 replies, has 2 voices, and was last updated by  WisdmLabs 1 month, 3 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #121101

    Porter
    Member
    Post count: 213

    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?


    I gladly accept beer donations – payment@gemfruit.com

    • This topic was modified 1 month, 3 weeks ago by  Porter.
    • This topic was modified 1 month, 3 weeks ago by  Porter.
    #121128

    Porter
    Member
    Post count: 213

    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?


    I gladly accept beer donations – payment@gemfruit.com

    #121139

    WisdmLabs
    Member
    Post count: 46

    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;
    }
    #121143

    Porter
    Member
    Post count: 213

    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 :)


    I gladly accept beer donations – payment@gemfruit.com

    #121145

    WisdmLabs
    Member
    Post count: 46

    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
    }
    #121148

    Porter
    Member
    Post count: 213

    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.


    I gladly accept beer donations – payment@gemfruit.com

    • This reply was modified 1 month, 3 weeks ago by  Porter.
    • This reply was modified 1 month, 3 weeks ago by  Porter.
    #121158

    WisdmLabs
    Member
    Post count: 46

    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.

    #121163

    Porter
    Member
    Post count: 213

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


    I gladly accept beer donations – payment@gemfruit.com

    #121176

    WisdmLabs
    Member
    Post count: 46

    You are most Welcomed… :)

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Image Padding Bottom’ is closed to new replies.