Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help identifying css element
- This topic has 10 replies, 4 voices, and was last updated 8 years, 2 months ago by
addiesgram.
-
AuthorPosts
-
September 21, 2015 at 1:06 am #166183
addiesgram
ParticipantI 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_textHelp! Can some kind soul tell me the correct selector so I can set the rule padding-bottom: 0px
TIA
http://lailamcgrewlcsw.comSeptember 21, 2015 at 1:12 am #166185addiesgram
ParticipantCorrection on the site URL: http://lailimcgrew.csw.com
September 21, 2015 at 6:50 am #166205Victor Font
ModeratorThe 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?September 21, 2015 at 4:16 pm #166256addiesgram
ParticipantVictor (or anyone) , can you point me to a good tutorial about how to create a class?
September 21, 2015 at 6:25 pm #166275addiesgram
ParticipantWhile 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?
September 21, 2015 at 6:59 pm #166278emasai
ParticipantThe 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.comSeptember 22, 2015 at 2:47 am #166307addiesgram
ParticipantThanks Lynne : )
September 22, 2015 at 7:55 pm #166415addiesgram
ParticipantUpdate: 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!
September 22, 2015 at 10:57 pm #166422dreamdancer
ParticipantI 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;
}September 22, 2015 at 11:19 pm #166423addiesgram
Participantdreamdancer, 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.
September 23, 2015 at 12:36 am #166425addiesgram
ParticipantOK 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; }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.