Removing large white spaces between site elements

  • Unknown's avatar
    takecontrol2021 · Member ·

    Hello,

    I need help to remove large white spaces between the menu bar at the top and the title of a page below, and between the title and the subsequent content.

    I have explained the issue and provided a screenshot here: https://premium-themes.forums.wordpress.com/topic/removing-large-white-spaces — as well as trying the solutions suggested there, but without success.

    I would very much appreciate any suggestions.

  • Unknown's avatar
    therefoiam · Member ·

    Hello,

    Before anyone can assist you, which plan are you on? I see your site still shows a wordpress.com subdomain and it may be because you haven’t configured your primary domain. The reason I’m asking is that it is to my understanding that one can only add additional CSS customization only if you are on a premium plan or higher. Your issue can be resolved by adjusting the element’s margins through CSS.

  • kokkieh · Staff ·

    Hi there,

    Your premium plan gives you access to 24-hour live chat support Monday to Friday, and 24/7 email support via the contact form at https://wordpress.com/help/contact. You don’t need to post in the premium theme forums, or here in the public forums for free users, for help with your site.

    Copying your screen shot here so we don’t need to jump around between different forum threads: https://ibb.co/zhH4KkY

    Remove the CSS you currently have added in the Customizer, and replace it with this:

    /* reduce space between header and page title */

.sticky-header.page .site-content {
	padding-top: 90px;
}

/* reduce space between page title and page content */

.page-header {
	margin-bottom: 15px;
}
.page .entry-content {
	margin-top: 10px;
}

    You can play around with the different values until it looks the way you want.

    Note this only applies to pages. If you want the same thing for your front page displaying the posts list, and for individual blog posts, let me know.

    On your About page at https://takecontroluk.wordpress.com/about/ you’ll see the gap between the title and content is still bigger, even with this CSS. This is because you have a spacer block added to the page content for that page, at the very top. You’ll have to edit that page and delete that block from the editor.

  • Unknown's avatar
    takecontrol2021 · Member ·

    Thank you so much, @kokkieh. That worked perfectly.

    Thank you also for pointing out the help available elsewhere. I am totally new to this, so I didn’t know.

    Thanks to you both for your kindness.

  • kokkieh · Staff ·

    It’s my pleasure :)

  • The topic ‘Removing large white spaces between site elements’ is closed to new replies.