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 built a website in HTML/CSS, however at some point along building it I have gained a slight sidway scroll to it, in other words the instead of the website perfectly fitting the screen there are thin bars of white each side that can be accessed through scrolling left or right on the screen. I am wondering how I could find out the source of this issue?
http://whynotapp.co.uk/tryitout.html
This occurs on both safari and chrome
This could happen because of a left/right margin on a 100% width element/div. It could also happen if you have positioned an element somewhere that causes it to go off the screen.
In general, if nothing is missing from the screen that needs to be on the screen, you can just use :
body {
overflow-x: hidden;
}
which will hide anything that over extends the x access from the screen.
Inspect element in chrome allows you to see a box of the location and size of an element, by selecting it in html. The element causing the problem should be larger than the containing element, which can help you find it.
F12 to enter dev mode or right click your element.
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 days ago.
Improve this question
The website is: https://www.epicoyachts.ch
As you can see there is the possibility to scroll right, which should not be possible.
I've tried to play around with the positioning settings, trying to scale the upper bar to the screen. But it has not solved the problem. I can't understand which settings I have to adjust, and mainly of which element.
it's the tiny red arrow to scroll back up
I haven't found any code for your website but, I have a feeling that for your page dimensions you are retrieving the data from the user resolution or, using a constant resolution like 100%.
If that's the case then I'd suggest possibly a fixed lengt resolution of eg 1920p.
//You can try this first if you did not have this
html, body {
max lengt: 100%;
overflow-x: hidden;
}
// If you did have it you can try changing 100% into a standart resolution (1920)
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 10 months ago.
Improve this question
I have a page with 3 flip cards based on this example. For some reason, during the flip animation, a scroll bar appears on the side of the page and then disappears when the animation is over. It causes the page content to shrink and expand for a second.
Is there a way to avoid it? It seems like the animation expands the page width by a couple of pixels.
You could try an overflow: hidden on the Card-Container.
It will cut of overflowing content and therefore avoid a scrolling bar.
https://developer.mozilla.org/de/docs/Web/CSS/overflow
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 vanila Css and having sucsess on the mobile Firfox broswer but a a problem occuring using Chrome broswer.
Here is the link.
Man i could not fixed. removing the footer which is fixed only partly solves the problem the right blank white
There is a "#footerTxt" element in the "#footer", you may modify it's css. If you remove the 'width' from it, the view is will normalizing (white space will remove from the right side).
You need to change/modify this "#footerTxt width" property.
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'm working on this website: www.artetia.com
The thing is that when I resize my viewport I get a white stripe in the right side of the browser as if the Body of my website is smaller or having a minimum width. Can't find how to solve this, I tried with Firebug to check the structure and seems that the html can't get smaller than 960px or so...
You need to stop the backgrounds being wiped out when the viewport is narrowed below 960px. Here's one way to do that via CSS:
div[id^="slide"] {min-width: 960px;}
(For those not seeing the issue, it's a common layout issue. If you narrow the browser below 960px, a horizontal scroll bar appears; and if you scroll right, the backgrounds have been wiped.)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
It's really bugging me and I have no idea why when I view this site on my mobile, it only shows the middle section and not the sides.
My side navigation is on the left side and completely cuts it out and I can't scroll to it.
Is there some sort of media query I could try? or change my CSS somehow?
Sorry I'f I'm being vague but I have no idea what to ask to make it work.
Here's the site www.joetest.comyr.com
thanks in advance for any help !
You have the width of the #mainpage set rather than a max-width, so as the page is scaled down, the #mainpage is taking the whole screen. Also, you have a negative margin-left set on the #leftpanel which pulls it off the screen when the screen size is smaller. I was messing around with your site using firebug right now and by removing the margin-left attribute I was able to keep the menu on the page while resizing the browser.
You're probably going to have to change your html structure though if you want to retain the exact layout on smaller screens.