Removing White Space??

[ciaoimports]

Hi-

We have a large white space at the top of our website (above the logo) that we would like to remove or reduce. Can anyone offer any assistance in how to do so? There previously was a design element above the logo that we have since removed but unfortunately, we are unable to figure out how to make that white space gap less drastic.

Thanks in advance. We are grateful for these forums. A huge resource.

Welcome to Ciao Imports - Authentic Speciality Foods

[jleclair]

Hello Ciaoimports,

Your logo image has some pretty dramatic margin on it's css property. The good news is it's very easy to fix.

On line 636 of default_modified.css, you have a class that's called:

.logo img {
    padding: 0px;
    position: absolute;
    margin: 75px 25px 0px 25px;
}

The margin property is what we are especially interested in here. In this case, it's written in short hand form specifying different margin properties for all four sides of the box model at the same time, in clockwise order.

The first of the four properties listed represents the margin pushing away from the top of the box, then the right hand side, then bottom, and finally the left. To understand what margin does, you must first understand what is called the "box model" for any element on a page. The box model essentially defines the origination point that other properties (like margin or padding or stroke) base themselves off of. I won't go too far in depth about it - because this could quickly turn into a novel, but I encourage you or anyone else reading this post to research how this behaves and some options you have with it.

Margin, starting from the edge of the box model, will push from that edge out and away from the element, to the pixel amount that is specified.

Back to the top margin property: because we want to raise the element up on the page, and margin is pushing away, we need to reduce the top margin. switching the first value from 75 to 35 makes the logo appear to be centered in the header vertically, rather than pushed to the bottom as it was before.

So now your same line(s) of code should look like:
(0 values in good practice shouldn't end in px)

.logo img {
    padding: 0;
    position: absolute;
    margin: 35px 25px 0 25px;
}

I have not tested this on any other resolution than your default desktop. If you have a responsive template, this may require some additional consideration. Be sure to test this on a phone or tablet also to be sure, but it's a step in the right direction and now you know where to look.

[ciaoimports]

THANK YOU SO MUCH for your excellent, detailed reply.

Very much appreciated!

Hello Ciaoimports,

Your logo image has some pretty dramatic margin on it's css property. The good news is it's very easy to fix.

On line 636 of default_modified.css, you have a class that's called:

.logo img {
    padding: 0px;
    position: absolute;
    margin: 75px 25px 0px 25px;
}

The margin property is what we are especially interested in here. In this case, it's written in short hand form specifying different margin properties for all four sides of the box model at the same time, in clockwise order.

The first of the four properties listed represents the margin pushing away from the top of the box, then the right hand side, then bottom, and finally the left. To understand what margin does, you must first understand what is called the "box model" for any element on a page. The box model essentially defines the origination point that other properties (like margin or padding or stroke) base themselves off of. I won't go too far in depth about it - because this could quickly turn into a novel, but I encourage you or anyone else reading this post to research how this behaves and some options you have with it.

Margin, starting from the edge of the box model, will push from that edge out and away from the element, to the pixel amount that is specified.

Back to the top margin property: because we want to raise the element up on the page, and margin is pushing away, we need to reduce the top margin. switching the first value from 75 to 35 makes the logo appear to be centered in the header vertically, rather than pushed to the bottom as it was before.

So now your same line(s) of code should look like:
(0 values in good practice shouldn't end in px)

.logo img {
    padding: 0;
    position: absolute;
    margin: 35px 25px 0 25px;
}

I have not tested this on any other resolution than your default desktop. If you have a responsive template, this may require some additional consideration. Be sure to test this on a phone or tablet also to be sure, but it's a step in the right direction and now you know where to look.