WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Text Padding Issue (13 posts)

  1. matt84532
    Member
    Posted 9 months ago #

    Could someone help me with something that should be a basic CSS fix, but which I can't seem to resolve?

    See this page here:

    http://www.wabi.dreamhosters.com/non-profit-directory/

    As you can see, I've changed the body to a green color and the background of the text container to white, which is how I want it.

    But you can also see that this makes the text appear too close to the white/green division. I would like to add some padding to the text only (not the whole container, which I have tried) so that there is horizontal space between the edge of the white container and the text.

    I know this should be very simple but I can't figure it out. Any help is greatly appreciated!

  2. NamLee
    Member
    Posted 9 months ago #

    Hi matt,

    Try adding this

    article.row-fluid {
       padding: 0 20px;
    }

    20px is the padding for the left and right. so you can change it until you get your desire result.

    Good luck!

  3. matt84532
    Member
    Posted 9 months ago #

    @NamLee thanks!

    Unfortunately that didn't seem to work. Any other suggestions?

  4. Andrew
    Forum Moderator
    Posted 9 months ago #

    Did you remove your green body colour?

  5. matt84532
    Member
    Posted 9 months ago #

    @Andrew Nevins Just restored the color.

    This appears to work for moving the text left:

    article.row-fluid {
    margin-left: 40px;
    }

    However, it forces the text on the right into the green container. Margin-right of any px amount appears not to have any effect. So how can I reduce the margin on the right so that the text stays within the white area?

  6. Andrew
    Forum Moderator
    Posted 9 months ago #

    Try adding this instead:

    .container {
     padding: 20px;
    }
  7. matt84532
    Member
    Posted 9 months ago #

    @Andrew

    the container tag moves the whole block out of alignment, creating a horizontal scroll.

    Here's what I've got going right now, which has gotten the text off the left margin but is overlapping to the right. The margin-right appears not to be doing anything; I also tried changing it to a %, to no effect.

    article.row-fluid {
    margin-right: 90%;
    margin-left: 30px;
    }

  8. Andrew
    Forum Moderator
    Posted 9 months ago #

    Have you tried removing all of these margins and instead just using padding?

  9. ImageOmega
    Member
    Posted 9 months ago #

    Hey Matt,

    Try this simple solution instead:

    .row-fluid {
    width: 90% !important;
    }

    Hope that helps!

    Ninja vanish!

  10. matt84532
    Member
    Posted 9 months ago #

    Thanks everyone!

    @ImageOmega, that code will shrink other items (like the header). But it's a great solution when combined with the margin adjustment I made earlier.

    The original CSS, BTW, produces a 20px left margin in the body -- so it wasn't until I tried a larger px margin that I actually saw a change.

    Here's the final solution that produced the results I was looking for without moving other items that I wanted to leave in place:

    /* Adjust text padding */
    article.row-fluid {
    width: 95%;
    margin-left: 30px;
    }

    Thanks to everyone who contributed. Truly a team effort!

  11. matt84532
    Member
    Posted 9 months ago #

    Marking this resolved. Thanks again!

  12. ImageOmega
    Member
    Posted 9 months ago #

    Awesome!

    I'm glad it worked out.

  13. Tania
    Member
    Posted 1 month ago #

    Thank you @matt84532
    I had same problem and you helped to fix it.

Reply

You must log in to post.

About this Theme

About this Topic