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
On the website http://www.northkingdom.com/, when the browser window is narrower than 568 pixels (or on mobile), and you click on the menu button in the top right corner, there is a narrow, vertical, white space to the right of the list:
What creates this white space?
I cannot find any CSS rules or page elements that keep the menu from sitting at the right edge of the screen.
Any help very much appreciated!
The problem is an overflow-y:scrollin here:header.mobile-menu #nav.
That white space is actually a scrollbar. You can replace it with auto instead of scroll
Thats a scrollbar, not a white space. Add this to your css of your ul and you will not have the problem anymore
overflow: hidden;
Related
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 6 years ago.
Improve this question
Working on https://faraz-manan-2apz.squarespace.com have a quick scroll through and come back (view as visitor and enter captcha)
Header image is meant to be fullscreen on all devices, which it is. good.
but I want the squares with the pictures (id="page") to start at the end of the header image, regardless of the viewing device.
I tried adding padding in different % but the gap between header and content looks weird.
Please help. Thanks
Change #header's height to 100vh so it will be the same as the viewport height. Then change #page's padding-top to calc(100vh + 50px) to push it to 50px below the viewport height.
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 have a border on the following website http://geertsprengers.be/ under the logo's of the nav.
Now the problem is that when I'm on the mobile website and there are 2 lines of logo's, the border should change the same as the arrow, below the clicked logo.
What is the easiest way to accomplish this?
Could you please provide some more information on what exactly you want to happen?
From what I could gather you want the border that is below the logos in your nav, to stay below the logos when the browser is brought down to a mobile size (when your logos go onto two rows)?
If this is the case you will simply need to do two things:
Change the float: left you have on the logos (li tags) to display: inline-block.
Change height: 54px you currently have on the nav to height: auto.
The problem is the you were trying to keep floated elements contained inside an element with a fixed height, which won't work in your case here. Instead you need to remove the fixed height, which will allow the nav to expand to fit the floated elements when they break up.
Hope this helps.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this weird white line on my front page that wont be removed. I loocked and cant find what it is. the site is responsive and it looks even weirder on on the cellphone. Can someone help me?
Well you have a couple issues. The quickest and easiest fix is to update the css class
gdlr-header-inner
add background-color:transparent;
That is the first issue is the background is white.
The next fix I would do as an easy fix is to look at the div right after the closeing header tag it should have the class content-wrapper.
To that div I would add margin-top:-95px;
At the end of the day the issue is your header is larger then the top part of the image. I wonder if you should merge the two images and set the background color and the background image to the body tag. Then you wouldn't have to worry about it. You then could still push the top down x pixels
http://www.w3schools.com/cssref/pr_background-position.asp
For starters, the div your logo is in along with its padding are too big for the header.
So it's pushing the rest of the page down.
Try changing the top and bottom padding on the gdlr-logo div.
You have a problem with the height of some elements, like:
.gdlr-logo {margin-top: 26px;}
Try to remove some margins and review the height of elements on the header.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
The website is www.cleantelligent.com/tour/
This image, as a background, has tooltips and links on it.
The issue is that, if you re-size the window, the image and title (the main div, I think) moves left and right. This means that the "Take the Tour" sub-head isn't always aligned perfectly underneath the "Tour" Title in the black bar above. They should be lined up down the left so that the image is centered underneath the header content.
Is it my positioning that's causing this? If so, how can I fix it? I've tried positioning it absolutely, but that collapses the page and the footer pops up to the middle.
Any ideas would be helpful. Thanks!
float: none !important;
margin: 0 auto !important;
width: 960px !important;
Add that to your styling for #primary in your css. You have some unnecessary styling being applied.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I hope someone can help me with this, I've been searching in my CSS whats wrong but can't figure it out.
If you look at this website: http://viversa.nl/v2/index.html , and click a bit threw the pages, you'll notice some jumping between sites. You'll notice it specially if you click from 'Projecten' to 'People' and back.
It seems "HOME" and "PROJECTEN" are the same, with both a good layout. Next to "OVER ONS", "PEOPLE", "CONTACT" and "SITEMAP" which have a good layout together aswell. But I can't figure out whats wrong and how its possible its jumping, since I simple copied the menu + logo pages + css.
Hope someone can help me out with this!
Thanks!
Sincerely, Stefan
The problem is that the project-page is longer than the screen, thus causing the vertical scroll-bar to appear. Since you are centering the layout and the scroll-bar takes up 20px or so of the space used for your site, what is considered as the center will "move" slightly when the scroll-bar appears.
To get rid of the jumping, you can force the vertical scroll-bar to always be visible:
html {
overflow-y: scroll;
}
The difference is the browser scrollbar. Short pages that don't require scrolling have a slightly wider space available to them compared to longer pages that can be scrolled.
Seems like you got too much text for your images that are only 410px in Height, maybe delete some text or make your background images longer and added some min-height into the CSS?