and yet more CSS help in Wordpress!

Posted on 2011-10-26
Last Modified: 2012-05-12
I am using a backend program called Builder to make a Wordpress site. ( makes it)

can somebody take a look at and tell me why the red ribbon, which is an image in an HTML module has padding or spacing above and beneath it. I want the ribbon to be flush against the module above it and beneath it.

I am using a plugin that came with the theme to style it, and their doesn't seem to be an option for me to control padding and spacing around an image that is inserted into an "HTML module."

The image at the top of the page (the header) is styled just fine, because I inserted that into an "image module" and the software does allow me to set the spacing for an image within an image module. But not an image within HTML module?

Should I just create a new div for that particular image? I think that would be the best idea, but I don't know how!

Thank you in advance!

Question by:mellijae
    LVL 3

    Expert Comment

    On line 34 in your style.css file I found the following line:

    h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, dfn, img, samp, ul, ol, dl {
        margin-bottom: 1.5em;
        margin-top: 1.5em;

    As you can see the img tag is in that list, which means it will get some margins.
    Do you want all your images to have these margins?

    Author Comment

    no, I don't!

    I would like MOST of them to have these margins, but not the one that make up the landing page (index).

    Later on, when the user is creating posts, it would be nice.
    LVL 3

    Accepted Solution

    Then override the style for that spesific element.
    If you can, add a class or an ID to the img element and add a style in your stylesheet which targets that element.
        .yourClass img { margin: 0; }
        #yourId img { margin: 0; }

    Open in new window

    If you can't change the class or ID for that img element you can try targetting the element through the classes it already has.
    I see the img element has a class called "wp-image-19". I'm not sure if this is a constant name, or if this will change when you add new elements, but you can try using that as a css selector.
       .builder-view-home .wp-image-19 { margin: 0; }

    Open in new window


    Author Closing Comment

    Awesome! Thank you. I am learning so much today thanks to the experts. Thank you again.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Suggested Solutions

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
    The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now