How to reduce the white space between main menu and feature image

Viewing 8 replies - 1 through 8 (of 8 total)
  • SideKick Dan

    (@shout-out-sidekick)

    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

    Thread Starter ashickur-noor

    (@ashickur-noor)

    Hi Shout Out SideKick

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

    SideKick Dan

    (@shout-out-sidekick)

    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>

    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.

    https://codex.www.ads-software.com/Child_Themes

    Thread Starter ashickur-noor

    (@ashickur-noor)

    Hi Shout Out SideKick

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

    SideKick Dan

    (@shout-out-sidekick)

    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 ??

    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.

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

    Thread Starter ashickur-noor

    (@ashickur-noor)

    it works

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to reduce the white space between main menu and feature image’ is closed to new replies.