Scroll the following page to right and you will see the following
What rule is causing the page to be that large and how can i fix it
Site is here
There is a horizontal scroll, because you positioned the div.features with left:350px;
Set display: inline-block to <div class="features"
UPDATE
It took about 10 seconds to find out where is the problem
Please use browser debug tools before posting such obvious questions
Add overflow-x: hidden; to your HTML element for a quick fix.
Related
I am trying to get sticky positioning to work with scroll snap but I am having difficulties.
I looked at the example on CSS Tricks (in codepen link) on how to use scroll snap and found it breaks if you don't have
overflow-y: scroll;
on the container (commented out on line 3). But if you do, then it breaks my two column sticky scrolling. Does anyone have any ideas on how I can use both?
https://codepen.io/shellwe/pen/abzgNzQ
If not anyone have some good suggestions on how to achieve the scroll snap in JS? I found this that may work but I would love to have the CSS handle it for me.
http://jsfiddle.net/kZY9R/79/
For anyone who comes by this, the reason you need the overflow-y: scroll is because you also need a set height and it scrolls within that constraint. I finally got back to this project and took a while to figure out why it won't work.
Cheers!
As the title says, the website is scrolling to the right when there is no content there.
I can only recreate this when using it on an actual mobile device.
Currently working on transferring it over, that's why the link is currently like that.
http://georgecohen-co-uk.php5.hostingweb.co.uk/
If anyone could help it would be greatly appreciated!
It may be a problem with animations? Maybe div which is sliding on the load expand ur page in horizontal.
Learn more about animations.
Or in CSS add
html, body {
margin: 0 auto;
padding: 0;
width: 100%;
overflow-x: hidden;
}
Please try this
overflow-x:hidden;
It might fix your problem
Try coloring your divs and /or respective borders so you can track down the issue. I would maybe use firebug or other equivalent plugin/ embedded browser tool
I already tried out a lot of suggestions that were made in related threads on Stackoverflow. However it doesn't seem to have worked. Please check my site http://popundernetwork.com - the footer works correctly on Chrome, Firefox,etc. But on IE 8, the footer not only floats right in the middle, but also prevents people from entering details on the form input screen.
I have already tried the position:absolute; bottom:0; commands as well as clear:both on the footer div. This has still not fixed the issue on the IE 8 browser.
Any help is greatly appreciated.
It's issue is not fixed in any browser if you ask me. (no pun intended)
Your body is becoming shorter than page height when you make you footer absolute.
Remove the position and the padding entirely from your footer and it should solve everything.
I have a Wordpress site that is doing something very bizarre. If you go to:
http://digitaldemo.net/joy/krippen-a-b-c/
When it loads, the main content div loads on the right hand side of the page
and then once the sidebar loads, THEN it gets pushed over to where it ought
to be.
It's only really noticable in Firefox, but I'd like to find out what is causing
it and fix the issue.
Any ideas?
I solved the issue! I added position:relative to the #content div and then added position:absolute and left:30px to the #content-left div. Voila!
Thanks for everyone who tried to help me!
The website: http://epic.lexcorp.ca/capabilities
If you open it in Firefox and then in Internet Explorer/Chrome you should see what I mean, and this is in regards to the two areas below the content (View Our Projects and News)
I've been trying to figure this out for about 40 minutes now and I'm at a loss. Help is greatly appreciated.
It's only a CSS problem.
Add this to your CSS file:
.bottomBox .region {
overflow:hidden;
}
With help from BumbleB2na I noticed there was a at the front of one of the tags.
That helped, but didn't fix it completely. I then noticed that there was margin-top areas that were pushing down the boxes entirely, so I adjusted the values to the div wrapping container and changed them to padding.
Seems to be seamless in all 3 browsers now.