WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Fourteen
[resolved] How to reduce the white space between main menu and feature image (9 posts)

  1. ashickur-noor
    Member
    Posted 6 months ago #

    Hi there
    How I can remove the white space between main menu and feature image of my site. Site link: priyoneer.com

  2. SideKick Dan
    Member
    Posted 6 months ago #

    Hello,

    I am assuming that you mean the white space above the image and the top black bar with the Content menu link and search button.

    If so, here is the css class that needs to be editted. There might be a few different places or methods to make the changes depending on how your theme is setup.

    The css that is creating the extra space is the .content-area padding.

    Right now there are two media queries where this padding is set. I can't tell exactly where they are because firebug css inspector is getting odd line number/file locations that are sometimes indicative of caching. but you should be able to add the following code to your main style sheet and it should override the old code wherever it might be.

    @media screen and (min-width: 846px) {
         .content-area {padding-top: 0px !important;}
    }
    
    @media screen and (min-width: 673px) {
         .content-area {padding-top: 0px !important;}
    }

    This should override the problem css causing the extra space above. If the .content-area affects other pages that you want the padding on, then you might pinpoint the home page only perhaps by using this format instead...

    @media screen and (min-width: 846px) {
         .home .content-area {padding-top: 0px !important;}
    }
    
    @media screen and (min-width: 673px) {
         .home .content-area {padding-top: 0px !important;}
    }

    Best Regards,
    Danny

  3. ashickur-noor
    Member
    Posted 6 months ago #

    Hi Shout Out SideKick

    I tried it, but it is not working. I just install the theme.

  4. SideKick Dan
    Member
    Posted 6 months ago #

    Hello,

    There are a couple of things you might try. It could be that you're inserting the code within another block of css that itself is part of a media query. This would cause the above code not to get seen when the browser is smaller. and would be my first suspicion. try adding the above code directly between the <head> </head> tags in your Header file as below. It should eliminate any issues with css priority inheritance and be a good way to see if it works. I tested the changes in firebug so they should. Again, sounds like they code is just not getting seen.

    Let me know how it goes :) Danny

    <style>
    
    @media screen and (min-width: 846px) {
         .home .content-area {padding-top: 0px !important;}
    }
    
    @media screen and (min-width: 673px) {
         .home .content-area {padding-top: 0px !important;}
    }
    
    </style>
  5. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    It's actually not a good idea to modify theme files at all - especially in a default theme - as those changes will be lost when WP is updated.

    I'd strongly suggest using a custom CSS plugin and adding changes there or using a child theme.

    http://codex.wordpress.org/Child_Themes

  6. ashickur-noor
    Member
    Posted 6 months ago #

    Hi Shout Out SideKick

    I am new on WP. Can you describe a little in which page I will add the code?

  7. SideKick Dan
    Member
    Posted 6 months ago #

    Hello,

    As WPyogi mentioned it's a good idea to use a child theme or a custom css plugin in order to avoid issues with updates to your template later.

    Adding the code to a custom css plugin might be the safest or to the active child theme's style.css file.

    Danny :)

  8. single0speed
    Member
    Posted 6 months ago #

    Hey, I had the same problem, Your code mostly fixed it, but there is still that annoying padding on the widget on the right side.

    http://www.bi-cycles.net/ you will see what I mean. an update on the code would be great :). Less padding please :)

  9. ashickur-noor
    Member
    Posted 6 months ago #

    it works

Reply

You must log in to post.

About this Theme

About this Topic