Help identifying css element

[addiesgram]

I successfully added a widgetized area (per Brian Gardner tutorial) above the header (id is .before-header) on my client's site. There is an unwanted 40px padding below the widget in that area and I can't come up with the correct selector to eliminate the padding. I've tried:

.before-header
.before-header.widget-area
.before-header.widget-area.wrap
#text-4.widget.widget_text

Help! Can some kind soul tell me the correct selector so I can set the rule padding-bottom: 0px

TIA

http://lailamcgrewlcsw.com

[addiesgram]

Correction on the site URL: http://lailimcgrew.csw.com

[Victor Font]

The 40px is coming from .widget. Create a class for #text4 and set margin-bottom: 0;

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[addiesgram]

Victor (or anyone) , can you point me to a good tutorial about how to create a class?

[addiesgram]

While waiting for some help I continued to try to figure this out. When I added this to style.css:

.before-header.widget-area #text-4 {
	margin-bottom: 0;
	
}

some of the unwanted lavender area below the image disappeared, but I've still got 24px lavender below the image. Adding "padding-bottom: 0px" to the above did not do anything.

Help?

[emasai]

The extra 24px is coming from

img.centered, .aligncenter {
    display: block;
    margin: 0 auto 24px;}

You need to target only that particular image in #text-4, otherwise all other centered images will no longer have the same margins.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[addiesgram]

Thanks Lynne : )

[addiesgram]

Update: I've relocated the above-header widget to below the header (thank goodness because it looks better under the header). I still have the 24 px hanging below the image and I really don't know how to write the code to target only that widget (per Lynne's suggestion), to eliminate the extra 24 px. The widget in question is now #7 (previously #4).

I'd really appreciate it if someone could provide the correct css code for me -- I'll then learn and save the snippet for future use. Thanks!

[dreamdancer]

I have a snippet for you, the margin below is coming off of the image and not the widget. This code is working for me, I use Espresso (for the Mac) it has a great ability to find the correct selectors, hopefully this will help

.after-header.widget-area #text-7 img {
margin-bottom: 0;
}

[addiesgram]

dreamdancer, thanks -- I added that code already (see my post above -- the widget is now #7). It removed some but not all of the unwanted space. There's still 24px I need to get rid of and emasai made a suggestion about it (see her reply above), but I don't know how to write the code to do what she's suggesting.

[addiesgram]

OK guys, not one to cry uncle, I persisted until I came up with something that worked. All the unwanted space is gone now. However, I have a feeling my solution is probably not the most elegant or efficient. Do I need to clean it up? Here is all the css that pertains to my widget #7 image. I'd just like to learn how to do this properly so I'd still be grateful for your feedback -- thanks.

.after-header {
	background-color: #ffffff;
	padding-bottom: 0px;
	padding-top: 0px;
	text-align: center;
}
.after-header.widget-area #text-7 {
	margin-bottom: 0;
}
#text-7 img.centered, .aligncenter {
    display: block;
    margin: 0 auto 0px;
}

[Author]

Posts