Having trouble with horizontal scroll bar on my site - html

Hi there I am having trouble with a horizontal scroll bar appearing on my site, I have no idea why it is appearing. It only showed up when I was playing around with the footer however even after removing the footer it was still there.
The site I am working on is http://tritorial.com.au any help would be appreciated thank you.

Just add this in your css
body {
overflow-x: hidden;
}

if you are using w3css, make sure the width is 100% including the margins and padding
try adding clear:both; and overflow:hidden; to some items in your css.

Related

how to make fixed navigation bar in website

I have logo picture in top of Web page.
After logo-> navigation bar.
after scroll down logo, how to make fixed navigation bar only. sorry for my English.
I cant really see what your problem is maybe you cold post a screenshot or something... But just try postion: fixed; in css maybe this will help!
In order to make an element fixed use position fixed as follow:
.nav{
position: fixed;
left:0;
top:0;
width:100%;
}
if you have overlay problems use z-index property
use nav{position: fixed;} in the head. Do post your code if you have further issues.

Overflow-X Hidden on html tag, iOS Safari Lags

On a simple mobile page, i tested on iOS safari have some overflow div using
div {position:absolute; right:-2em; /* or */ left: -3em;}
if i set the body using
body {width:100%; overflow-x: hidden;}
it only hide the scroll bar, but still able to pan to the right;
but if I do
html {overflow-x: hidden;}
it dose the trick but make scrolling very laggy. prob something simple that i overlooked.
thanks
EDIT:
sorry I didnt read your question correctly but try changing the block's position to this instead:
position:fixed;
it does what you want but that block will stay in that spot when you scroll up and down.
try that and see if it is what you wanted.

Remove horizontal scroll bar Godaddy html

I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.

Horizontal scrolling doesn't show up when I resize browser

I am building out a page. I noticed that when I resize the browser to see how it looks in a smaller window, the horizontal scroll bar doesn't show up.
This is the only css code I have for the body:
body {
font-family:Helvetica, Arial, sans-serif;
margin:0;
background-image:url(img/paper-footerbg.png);
background-attachment:scroll;
background-repeat:repeat-x repeat-y;
}
Here is a link to the page I am building out, http://taghomecaremarketing.com/test/theadamgroup/
Any help is appreciated. Thanks.
In your css for container div's, remove overflow: hidden
#headerBox, #mainBox, #subBox, #footerBox
Surely, you will encounter some other problems, but that's the answer ...
Or add overflow:auto. or overflow:auto!important;
If that does work and brings up a scroll on the x and y axis. Then best to try overflow-x:auto;
Good luck!
You've set it to overflow: hidden! This hides the content. Change it to overflow: auto, or better still, delete it!

Dont know whats creating bottom scroll bar

I'm working on a theme for wordpress here http://mhutchinson.me.uk/ but a scroll bar is being added to the bottom of the webpage saying that the body content is wider than the page.
But I cant figure out whats pushing the content out. Does anyone know how to solve this?
Thanks,
Megan
This should be Your problem:
<iframe scrolling="no" id="f1830c0ce6ba962" name="f323631050eb616" style="border: medium none; overflow: hidden; height: 240px; width: 575px;" class="FB_UI_Hidden" src="http://www.facebook.com/dialog/oauth?api_key=153185341443233&app_id=153185341443233&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df4145651077ece%26origin%3Dhttp%253A%252F%252Fmhutchinson.me.uk%252Ffb320d27f95db6%26domain%3Dmhutchinson.me.uk%26relation%3Dparent.parent&client_id=153185341443233&display=none&domain=mhutchinson.me.uk&locale=en_US&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df24fe177267a76a%26origin%3Dhttp%253A%252F%252Fmhutchinson.me.uk%252Ffb320d27f95db6%26domain%3Dmhutchinson.me.uk%26relation%3Dparent%26frame%3Df1830c0ce6ba962&response_type=token%2Csigned_request%2Ccode&sdk=joey"></iframe>
You need to make this iframe width smaller.
If you just care about getting rid of the scrollbar, you can hack it out by specifying the overflow or width of your html or body elements.
Well if you really can't figure it out start with this before all of the other CSS:
http://www.cssreset.com/