• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Help identifying css element

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help identifying css element

This topic is: resolved
  • This topic has 10 replies, 4 voices, and was last updated 8 years, 2 months ago by addiesgram.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 21, 2015 at 1:06 am #166183
    addiesgram
    Participant

    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
    September 21, 2015 at 1:12 am #166185
    addiesgram
    Participant

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

    September 21, 2015 at 6:50 am #166205
    Victor Font
    Moderator

    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?

    September 21, 2015 at 4:16 pm #166256
    addiesgram
    Participant

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

    September 21, 2015 at 6:25 pm #166275
    addiesgram
    Participant

    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?

    September 21, 2015 at 6:59 pm #166278
    emasai
    Participant

    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

    September 22, 2015 at 2:47 am #166307
    addiesgram
    Participant

    Thanks Lynne : )

    September 22, 2015 at 7:55 pm #166415
    addiesgram
    Participant

    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!

    September 22, 2015 at 10:57 pm #166422
    dreamdancer
    Participant

    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;
    }

    September 22, 2015 at 11:19 pm #166423
    addiesgram
    Participant

    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.

    September 23, 2015 at 12:36 am #166425
    addiesgram
    Participant

    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
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble