How to remove too much white space under menu bar

Hi there!

If you could post a link to your site it would be my pleasure to try and help you out with a code snippet.

Cheers!

Luke the Daft Duke

Hi DD,

I’m working on the design on my pc so not got a link to send you. However, one of the other posters with this issue is https://www.gurleyevents.com and she has exactly the same problem, if that helps and I’m sure she’d also appreciate your help!

It is pertaining to the sugar and spice download, seems to come down with the big gap which seems to be slightly deeper on a full page than a page with sidebar, but that could be my eyesight!

Thanks

Helen

Hi,

I’ve just taken a look at the link you sent and I’m enable to reduce the white space with this snippet:

#main {
padding-top: 0;
}

.entry-content {
  margin-top: 0;
}

You can paste this code in your child theme’s style.css or in a custom css plugin such as Simple Custom CSS.

I hope that helps!

Luke the Daft Duke

That’s brilliant DD, thanks very much. I wanted a tiny bit of space so changed entry-content to 1 and it’s perfect.
I will steer the others towards your post.

Many thanks

Helen

Great! ?? Glad you got it sorted.

Hi,
I also am using the Sugar and Spice theme,
I wonder if I can ask if there is a way to change the white space either side of the main body to give a deeper tone to enhance and bring out the website, as it is a great theme but a little too much white space surrounding it,
Many thanks if anyone can help.
chipst

Hi Chipst,

Sure, there’s definitely a way. If you post a link to your website I’ll take a look and suggest a code snippet for you.

Cheers,

Luke the Daft Duke

Hi DD,

Can I be cheeky and ask you how to remove the blank space below the image and before the footer widgets please using the same code as before on https://www.gurleyevents.com

I have managed to remove the border line but this hasn’t brought anything higher up the page (full page no title).

Many thanks

Helen

Sure,

You’ll have to replace the code I gave you before with this (don’t add it in alongside or it won’t work).

#main {
   padding-top: 0;
   padding-bottom:  0;
}

.entry-content {
   margin-top: 0;

.entry-summary, .entry-content, .page-content {
  margin-bottom:  0px;
}

.entry-content > h3 {
  margin-bottom:  0;
}

Hope that helps! ??

Luke the Daft Duke

Hi,
Daftduke,
Thank you for your reply this is the website I am building
siliconewomen.com it is only in a very early stage at the moment which is why I would like to make some enhancements
chipst2015

Try this:

#main {
 padding: 3em 10px;
}

You can paste this code in your child theme’s style.css or in a custom css plugin such as Simple Custom CSS.

Hope that helps!

Luke the Daft Duke

Hi luke DD,
Was the above code for me,
I have tried it just in case no effect i’m afraid,
but thanks for your time with it
On the site I have put in a background color, but there is only the slightest amount showing on either side of the web page on my large monitor, and the rest is whitespace no matter what I try it has no effect,
kind regards
chipst

I think perhaps I don’t understand what you mean by ‘whitespace’.

Could you post a screenshot and indicate what you mean.

Hi Luke DD,
Sorry if I was a little vague, if you take a quick peek at the site I have started siliconewomen.com when viewing on a large monitor the area surrounding the webpage is all white, I was wondering if I could change this color to one that makes the webpage stand out more, I did take a screen shot but can’t see where I can place it on here.
many thanks for taking the time to reply,
chipst

Hi Luke,
Thanks for your super speedy reply. I was on a train at the time so couldn’t respond. I removed the original code and tried this and it worked, in as much as it reduced some of the space, but it seemed to prevent the other things in my child css from working. i.e. it brought the border back that separates the page from the footer and it brought the shadow back around the image – very strange.

These are the alterations I’ve made to the custom site via my child css in case that has an impact on anything:

/*
Theme Name: sugar-and-spice-child
Version: 1.0
Description: A child theme of Sugar and Spice
Template: sugar-and-spice
Author: hjauthor63
*/
@import url("../sugar-and-spice/style.css");
/* Your awesome customization starts here */

/*center contact us form*/
form {
margin: 0 auto;
width: 50%;
}

/* Changing header font, size colour */

}
nav#main-nav > ul > li:after { content: ' \2022'; color: #d2d2d2; }
nav#main-nav > ul > li:last-child:after { content: ''; }
nav#main-nav > ul > li > a {
    padding:8px 24px;
    color: #B0509B;
    font-family:  'Niconne', cursive;
    display: inline-block;
    font-size: 2em;
    text-transform:none;
    text-shadow: 1px 1px 0 #EAE1D8;
    text-align:center;
    text-decoration:none;
}

/* To reduce white space top of page */

/* To reduce white space top of page */

#main {
padding-top: 0;
}

.entry-content {
  margin-top: 1;
}

/*Remove shadow around images */
.entry-content img {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

/*Make site header title bigger*/

.site-title {
    font-family: 'Niconne', cursive;
    font-size: 40px;
    margin: 0;
    font-weight: 400;
}

/*Removes footer menu-border image */

#prefooter-inner {
        margin: 0 4px;
        background-image: none;
        background-repeat: repeat-x;
        background-position: top left;
        padding: 3em 34px 0;
    }

Many thanks

Helen