How to get rid of the extra spacing? [closed] - html

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
You can find the staging environment over here:
http://axces-staging.houston-1.hybridmedia.be/
I have a lot of unnecessary spacing above the title "Onze aanpak".
I only have this issue on Firefox. It looks fine on chrome and safari.
Cannot find what causes this. Does someone have any idea?
Thanks.

It's due to two values in the elements above that space:
1.) The top: -30rem in homepage-middle__wrapper
2.) The margin-top: 30rem in section--products homepage-middle background--primary
Erase both to eliminate that space.

First of all, remove the negative value for top here:
.homepage-middle__wrapper {
margin-bottom: -27rem;
padding-top: 2.5rem;
position: relative;
top: -30rem;
}
Remove the margin-top here:
.homepage-middle {
margin-top: 30rem;
padding-bottom: 0;
}
At a padding top to the container or wrapper to achieve the same effect as before.

Related

Google map has extra Width [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am using 100% and margin:0; but still google map coming width it's extra with and page is fluiding when map is open.
#map {
margin: 0;
width: 100%;
display: none;
height: 400px;
}
This is what i am using for map. but still,
it's look like this at the right side of the page.
The parent element which contains #map might be having some extra width. To confirm, please try to give a fixed pixel width to #map and check if that solves the problem. Might be able to help you more if you could share your HTML code.
#Barbie
You can hide Extra space by just giving a property.
Also extra map isn't important as well.
:
overflow: hidden;

Unwanted white space at the bottom of page [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have unwanted space at bottom of the page. Cant figure out whats the problem.
I also searched for this tried every answer but no solutions
Its the height from hidden sub menu from the nav.
It's being caused by the length of the "Electrical equipment & parts" section of your product menu. You'll notice that the page height exactly matches the height of that part of the menu.
Also, in the 'Chemicals' section of the products menu, "Anti-Corrusions" is misspelled. "Anti-corrosion."
The first problem is that you have a min-height: 800px css rule set on your body tag -- get rid of that to start. The problem you'll have after that is that you want your footer to stick to the bottom of the page. You can do this by adding:
.blog-list-page {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
width: 100%;
bottom: 0;
}

Issue about too much spacing beneath the footer [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I tried to look for this issue for more than an hour but unfortunately unable to find where the problem exist. Here is the link for it http://professionals.dev.wbstaging.com/results as you can see at the bottom there is a bigger spacing, thank you for the help.
Try adding overflow:hidden to your class .main_container.
.main_container {
min-height: 797px;
position: absolute;
height: auto;
overflow: hidden;
}

How to get rid of hidden space HTML/CSS [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I building a website with HTML and CSS as part of an exercise. However, I have stumbled across some odd space I need to get rid of. Inspecting the webpage, it seems like there is extra empty content being displayed above my images. This happened after I added navigation arrows.
If anyone have any suggestions on how to deal with this situation I'd be very happy.
The website is as following: http://folk.ntnu.no/nikolahe/gloshaugen/gloshaugen.html
html: http://pastebin.com/micJCBq1
css: http://pastebin.com/WW9i52qc
Suggestions towards layout and good practices are also much appreciated.
This happens because you use position:relative on the #previous and #next elements. Like this they are repositioned but still use up the space they would originally occupy.
Use the following css instead:
.block-wapper {
position:relative;
...
}
#previous {
position: absolute;
left: 10px;
...
}
#next {
position: absolute;
right: 10px;
...
}

How do I get rid of this space in my document [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
enter code herehttp://jsfiddle.net/rLP5V/
I have my document listed above, for some reason, even when I set margins to 0 the margin between the header1 and nav bar still shows and leaves an unnessecary blank between the both of them. Please let me know how to get rid of it. P.S. The page I am creating is for a project
Elements like h1 and ul have usually their margin set by the browser's (user agent) own stylesheet unless explicitly overwritten :
h1 {
margin: 0;
height: 50px; // SAME HEIGHT AS PROFILE PHOTO
}
ul {
margin: 0;
}
See Fiddle: http://jsfiddle.net/bonatoc/jhU85/1/
Look for the last lines added to the CSS.
The h1 element has a margin defined by the browser. You will have to override this in your CSS.