top padding too big

  • Unknown's avatar
    airawot · Member ·

    Hi guys,

    Just trying to build a website using 20-20 theme, the home page seems fine. But the other page at the top, there is too much padding of space. Not able to modify to a decent size or size as the main page. For example, you can visit any other pages in navigation. Any tweaks please?

    The blog I need help with is: (visible only to logged in users)

  • aleone89 · Staff ·

    Hey there,

    To check – are you looking to reduce this space here:

    Many thanks in advance.

  • Unknown's avatar
    airawot · Member ·

    Hi,

    thank you for reply. Just want to be in control of spaces. the red one as you marked. plus the space before the navigation pane.

    Thanking you

  • staff-zinnia · Staff ·

    No problem. You can adjust the padding in these spaces through custom CSS which is a feature included in your hosting plan. Open up the customizer then on the left hand side of the screen click on Additional CSS, then paste this code below and save. 

    
element.style {
    padding-top: 0;
}


    You’re also going to want to take a look at how those changes impact the mobile view of the site since our themes are optimized for mobile view, making changes could impact that. The majority of internet traffic happens on mobile devices. If I were you, I’d think about where you’re traffic is coming form and if it is coming from mobile, then I’d leave this alone, honestly.

    The first link on this css support page has some good resources to help you learn more about using it.

  • Unknown's avatar
    airawot · Member ·

    Hi ,

    Thank you for reply but it didn’t help.

    Thanking you

  • Unknown's avatar
    dragstor · Member ·

    Hello!

    Thank you for reply but it didn’t help.

    Can you try this one, please?

    /* Remove the top padding | /forums/topic/top-padding-too-big (NST) */

@media screen and (min-width: 700px){
    .singular .entry-header {
        padding-top: inherit !important;
    }
}

/* END | /forums/topic/top-padding-too-big (NST) */
  • Unknown's avatar
    airawot · Member ·

    Hi Dragstor,

    Thank you for jumping in to support. Above worked as required. Luckily while searching for the code using your code content, found a better verstion where I can control both top and bottom of entry header. Changing number before rem, helps me to customize per my need.

    .singular .entry-header { padding-top: 2rem !important; padding-bottom: 60rem !important; }

    Link : https://wordpress.org/support/topic/twenty-twenty-reduce-the-distance-between-the-top-line-and-the-first-heading/

    But new problem now is in mobile view, the footer also came up. Here also in deskop view, the footer seems a bit off, showing the background yellow. Need to fix this now. :)

    Thanking you

  • Unknown's avatar
    airawot · Member ·

    You can see the footer moving up. Mobile view is pretty bad.

  • supernovia · Staff ·

    Were you able to resolve this? I don’t see the small yellow line now. But if you’re only having trouble on mobile now and what you had was fine before, you might use a media query to limit how the changes apply:

    WP
    Using Media Queries with Custom CSS
    in WordPress.com Support
    3 min read
    CSS media queries allow you to apply different sets of CSS rules based on conditions like browser width or device type. Most commonly, media queries are used to create a responsive design, where different CSS styling is applied to different screen sizes. This lets designers craft sites that are pleasant to use and easy to read – even on very small screens – without creating completely separate mob

    For what it’s worth, layout and functionality changes can potentially get pretty complex with media queries, and they fall outside the scope of the CSS support we offer here.

    You may also want to consider using a newer block theme that offers more control over individual elements.

  • Unknown's avatar
    airawot · Member ·

    Hi, which other block theme do you recommend? And appreciate for letting know about media queries.

    Thanking you

  • deancroyal · Staff ·

    Hi there – It’s difficult to recommend just one. Take a look at the themes here, starting from the top. Most are quite new, based on blocks, and offer a bit more control over individual elements. They are also based on the new Site Editor which you can learn about here. Let me know if you have any questions about what you find there. And if you’re curious what switching a theme entails we have a guide here that explains it.

    I realize this is a slight departure from the original reason you’re here in our support forums. Let us know how we can continue helping you move forward. :)

  • The topic ‘top padding too big’ is closed to new replies.