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.
Related
I am building a website with a trustbox (trustpilot block) in the top bar. My trustbox gets pushed down under the top bar. I want everything to be in the same line with the trustbox positioned all the way to the right. How do I achieve this?
And by the way, how do I prevent the div that contains the trustbox, from cutting the trustbox as I experience this sometimes on smaller screens?
I've tried this:
.header-top-bar-area {
display: inline-block
float: left
}
I've tried the above CSS content for the info section which is the location, email and phone section to the left.
.trustbox {
white-space: nowrap;
}
And this for the trustbox, but it pushes the trustbox down.
UPDATE:
<div class="trustbox header-top-bar-area col-xs-fit area-right" style=" white-space: normal; float: right; padding-top:5px;">
can you try adding css header-top-bar-area col-xs-fit area-right in trustbox
<div class="trustbox header-top-bar-area col-xs-fit area-right" style=" white-space: normal; float: right; padding-top:5px;">
this should work
Edit: I see it working, can you give me the screen resolutiuon you are working on.
Try rearranging your div like the below order and apply appropriate class to them..
I think.. It wouldn't align because it's taking the < div> class or column.. It inherited from your structuring.. I.e your codes in your html
If you want it to float left.. You have to adjust the column settings from your html and also check your element properly, the opening and closing tag.
You will see that it follows one pattern that's why it can't change..
Also can't be 100% sure cause I haven't seen your full html codes and css arrangement .. Just try what I said and see if it works out.
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.
Please take a look at this page
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
Do you have any idea how to fix this?
Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
.banner {
position: relative;
z-index: 10;
}
You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
You can play with the z-index of other elements to keep them above others on the page.
Check if the overflow setting is set to hidden, if it is remove the value.
.banner {
overflow: hidden // remove
}
The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.
Try adding the following styles to class dropdown:
.dropdown {
position: fixed;
z-index: 9999;
}
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
My footer doesnt go all the way to the bottom.
I have put my code in a js fiddle for people to have a look at:
http://jsfiddle.net/q2pd5/
My problem is better viewed on the actual page:
http://dev.madhousecreative.co.uk/
or on the full screen result of the jsfiddle its obvious also.
As It is clear to see, underneath the footer there is a white gap, and I dont know why it is appearing.
I have alot of floats in here but I have tried clearing them where necessary.
Have also tried to sticky footer as suggested in some other questions answers but that doesn't work either.
As far as I am aware it is on all browsers
Just add
overflow: hidden
to #footer in your css. This is a little trick that often gets overlooked. Basically overflow: hidden allows your div to size vertically based on it's contents.
You haven't cleared the floats of the lists in the footer. Clear it with overflow: hidden; on the footer like this:
#footer {
overflow: hidden;
}
Your footer is not being properly cleared. Try it with a clearfix like so:
#footer:before, #footer:after {
content: "";
display: table;
}
#footer:after {
clear: both;
}
#footer {
zoom:1; /* ie fix */
}
The footer has height: 200px; specified, chopping of the background image. The footer actually extends to the bottom of the window, but the last item in the list can't be seen because it is white text on white background.
In other words, setting overflow: hidden doesn't fix it alone, it just chops of the rest of the footer. Remove the height: 200px as well, and it works.