Pages that have the AddThis code are very wide because of the AddThis code. As a result, a horizontal scroll bar appears.
Removing the code, or changing the page direction to LTR fixes everything and the page width is back to normal.
Like mentioned, the problem happens because I'm using RTL direction (html dir="rtl") and when I tried to put the Addthis code into a div which has direction LTR, it didn't help.
How can I get rid of the horizontal scroll bar and yet use a RTL direction?
There are some spans in AddThis html which are automatically added to page. some of those spans use ".at_a11y" css-class in which there are a left attribute that is the main reason of horizontal scroll.
.at_a11y {
position: absolute!important;
left: -10000px!important;
top: auto!important;
width: 1px!important;
height: 1px!important;
overflow: hidden!important;
}
Solution: You can define your own '.at_a11y' css class in your own css files and override the left attribute to a normal value. This will cause the above css attribute to be useless and then horizental scroll will disappear!
.at_a11y
{
left: auto !important;
}
I had the same problem and i found the fix in your question!!!
the RTL LTR is the point and what idid was to make CSS style for the inner div insted for the body.
<body>
<div class="wrraper">
-- the cod for the addthis some where in the page... --
</div>
</body>
when in the css the .wrraper is position LTR insted of RTL
the exem:
http://www.visualtext.co.il
put html{
overflow-x:hidden;
} will solve this problem
Related
I'm trying to implement a popover for language selection, but encounter two problems:
1) The popover is hidden above the footer when I apply position: absolute; to the footer.
2) The popover sticks to the right side of my page. I would like a margin there, but margin-right doesn't seem to have effect.
Here's a jsfiddle.
Note: this might not be the case with newer versions of bootstrap, but I'm using this one in the rest of my site and migration to a newer version is out of scope for now...
EDIT: I fixed the first problem by adding {container: 'body'} to the tooltip. Second one still open...
EDIT 2: I managed to add a margin on the right by using:
.popover
{
right: 10px !important;
left: auto !important;
}
The only problem now is that the arrow isn't centered with the text beneath the arrow anymore... any tips?
One way to accomplish this is by adding a fixed position position:fixed; right:40px; to your #wrapper. This will allow you to adjust your position to the left and or right. However, if you attempt to adjust top or bottom it will break out of its parent container and be relative to the document. Therefore, if you need to make adjustments to top or bottom use margins.
#wrapper{
min-height: 50px;
max-height: 100px;
display: flex;
align-items: center;
position:fixed;
right:40px;
}
I have a website and from out of nowhere, whitespace started appearing on the left hand side of the page. I just can't figure out what the issue is?
Please help. Here is the link the the website
Try this:
.home #primary {
clear: both;
}
Removing overflow hidden removes the whitespace on the left, however the feature image is off.
.no-container {
overflow: hidden;
}
Remove the overflow: hidden from the .no-container class
Then you need to fix the slider position.
You need to remove this:
.no-container {
overflow: hidden;
}
And then adjust the settings for the Revolution Slider Wordpress plugin. It looks like you have added an offset value as it automatically adds a left style to the element. Also set the width to 100% it is currently set to 1663px and it should be ok.
I have read the documentation over at skrollr. My site is wrapped in the
<div id="skrollr-body">
..site here...
</div>
And all my fixed elements are located below that, outside of those tags.
In my regular desktop view it works fine, but when I test it on a mobile, I can see that skrollr adds overflow:hidden; to both the body tag, and also the html tag.
if I add
html {
overflow:scroll !important;
}
I can scroll on the mobile, but all the skrollr functions break.
Why are these css rules being added to my elements, and what do I have to do (other than what I've already done) to get the page to scroll on mobile and still have the skrollr functions intact.
try:
body {
height: 100% !important
}
or
#skrollr-body {
min-height: 100%
}
Also, try to take out of #skrollr-body any fixed element like a bootstrap navigation bar.
I have a web page that is longer than the standard screen. When I open it in the browser there is no vertical side scroll bar that allows the user to move down the page. I tried using the line overflow:scroll; but it seems it is ignored. I have a header and a line of buttons, then the content is in three sections. I have the overflow:scroll within the first BODY line like this: body overflow:scroll class="plugin webkit chrome win Locale_en_US"
How do I force the scroll bar to appear and where should it be properly placed?
Sorry, it's been years since I've done html or any kind of coding so bear with me.
The overflow is a css attribute, meaning that it should be in a style tag, or even better, in an external css file ( http://www.w3.org/TR/html401/present/styles.html )
In your case it would be:
<body style="overflow: scroll" class="plugin webkit chrome win Locale_en_US">
Use css style='overflow: auto;'. If not works, find any element, that is overflow: hidden; and apply overflow: auto to it. Or add JSFiddle
i'm using this in my project, i created a css like this
div.scrolled {
width: 1150px;
height: 620px;
overflow: scroll;
}
and in my html file i only identify what area i want to introduce into my div and i do this
<body>
<div class="scrolled">
here goes wath you want
</div>
</body>
and you will have your scroll in 'y' align, hope i helped you
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.