• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

and yet more CSS help in Wordpress!

I am using a backend program called Builder to make a Wordpress site. (iThemes.com makes it)

can somebody take a look at syked.com 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!

melanie
0
mellijae
Asked:
mellijae
  • 2
  • 2
1 Solution
 
Rouneh10Commented:
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?
0
 
mellijaeAuthor Commented:
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.
0
 
Rouneh10Commented:
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; }
OR 
    #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

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

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now