• 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

Reduce space between two widgets only

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 › General Discussion › Reduce space between two widgets only

This topic is: not resolved

Tagged: Space between widgets

  • This topic has 9 replies, 2 voices, and was last updated 10 years, 9 months ago by noah.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 31, 2014 at 5:25 pm #122123
    noah
    Participant

    I want to remove the space between my first and second widget, but without affecting the rest.

    The space is between the third and fourth widget on http://www.leaseholdknowledge.com: i.e. between the text widget "What is LKP?" and the "Find Everything Here" image-to-archive page widget.

    I only need the space removed here.

    This removed space from other widgets:

    `.sidebar .widget {
    background-color: #cfd6cf;
    padding-bottom: 0rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;

    http://www.leaseholdknowledge.com
    August 31, 2014 at 5:48 pm #122128
    jbergen
    Member

    Hi,

    Each widget has a unique ID, so you can just add a new CSS rule that will point specifically to that widget. In your case, you can reduce the padding below the "What is LKP?" text widget with the following rule:

    #text-11.widget {
        padding-bottom: 0;
    }

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    September 1, 2014 at 12:20 am #122178
    noah
    Participant

    Thanks for that, but it isn't working.

    I tried this

    #text-11.widget {
       padding-bottom: 0;
    }
    

    But also need to remove padding-bottom from #featured-page-8.widget, and the rule.

    Any thoughts?

    September 1, 2014 at 9:39 am #122216
    jbergen
    Member

    I looked again, and when I added the following rule to style.css, the space was reduced below the "What is LKP?" widget. Do you want to remove more space?

    #text-11.widget {
       padding-bottom: 0;
    }

    To reduce the space below the "Find Everything Here" widget, I would add this rule to style.css:

    #featured-page-8.widget {
    	padding-bottom: 0;
    }

    I'm not sure why that didn't work for you, but let me know if the issue is that you want to remove more space. Also, I would recommend adding any custom CSS in a separate CSS file rather than style.css so that you don't lose your customizations when you update your theme.

    Jamie


    Jamie @ Ladebug Studios

    September 1, 2014 at 1:27 pm #122262
    noah
    Participant

    It is not having any appreciable effect when I add this to the bottom of the style.css file :

    #text-11.widget {
       padding-bottom: 0;
    }
    
    #featured-page-8.widget { 
    padding-bottom: 0;
    }

    (I am not sure why I would want to create another style.css file – a third? Isn't making backup copies of the News Pro child theme files sufficient?)

    September 1, 2014 at 1:55 pm #122264
    jbergen
    Member

    I'm not sure how to help because those CSS rules did reduce the space below the widgets you specified when I tried it with my developer tools. If you want to reduce the space some more, you can add:

    #featured-page-8 {
        padding-top: 0;
    }

    Also, here's a nice explanation of why you might want to add your custom CSS to a separate file. It's not required; it just makes it so that you don't lose your customizations if you update/replace your theme.

    Jamie


    Jamie @ Ladebug Studios

    September 1, 2014 at 4:38 pm #122287
    noah
    Participant

    Thanks, but I just cannot get any of these to work on a browser of mine.

    I will just have to use other widgets – featured page not a text widget – which might not add so much space.

    September 2, 2014 at 2:08 am #122357
    noah
    Participant

    I followed Matt's advice in the link above and placed this in the Header and Footer Scripts.

    But where do you actually edit the css? Immediately below? In the file itself via cPanel? FTP? It does not appear in the Editor drop down menu along with the other css files.

    <link rel='stylesheet' type='text/css' href='http://www.leaseholdknowledge.com/wp-content/themes/news-pro/NewsProchild.css' media="all" />

    September 2, 2014 at 9:28 am #122418
    jbergen
    Member

    If you can't see the new file in your Editor drop down menu, my guess is that you'll have to edit the file itself and transfer by FTP. You can also follow up with Matt on his blog.

    Jamie


    Jamie @ Ladebug Studios

    September 12, 2014 at 1:20 pm #124143
    noah
    Participant

    The problem is that I am using W3 Total Cache and Amazon Cloudfront.

    As a result, edits to CSS don't show. Anyone had the same problem?

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘General Discussion’ 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

© 2025 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