There is a gap or blank space at the right side of my web page and I cannot manage to remove it. I don't know why it appears, I have look on all the elements of the page but nothing seems to be occupying that space.
You can go to the page so you can see what I mean, and also you can see all the source code: www.iot3k.com
The following problem can be overcome by doing:-
body {
width: 100%;
overflow-x: hidden;
}
Doing this you will hide the excess content along the x-axis.
Hope this helps you.
In general when ever you have similar problem you just have to click f12 and go to mobile view or what ever view then you just have to click on the mouse within border icon then you just have to hover mouse on your page and it will show you what is making the problem.
in your case :
you have to resize the images .
body{
overflow-x:hidden;
}
Related
thanks to anyone who considers helping me.
When I am resizing my website, there is a white space that is being created.
The white space I refer to, circled in orange.2
I don't know why it happens, and when I use:
overflow: hidden; / overflow-x: hidden;
It fixes the issue.
using overflow, and it is fixed!
Can someone help me understand why using overflow: hidden fix the issue?
And also, why is this happen in the first place?
Thanks!
overflow - means that something (in this case one of your html items) is so to say bigger than its container and therefore it overflows or spills out. by making it "hidden" you hide it and therefore only the part of your item which fits to its parent container is visible
It would help if you could share some of your code that way we could build off of it and see more clearly what is happening.
That being said, the large white space is due to the image for CBS CNN being too wide as you can see in your first image. In the second image, you make overflow hidden and the CBS CNN is cut in half to fix your issue. You need to change the way you style that image for mobile view.
Here is my problem. I have a carousel that act like a menu also. When the amount of tabs is higher than the space of width available on your browser, the carousel-controls appears. Everything works fine. But I added as well a dropdown menu on each tabs and here is the thing. If I put overflow:visible, we can see the tabs sliding in and out of the div, which is very ugly.
If I put overflow:hidden, the slider works fine, but then, I can't see anymore my dropdown menu since they are hidden vertically as well. I tried to put overflow-y: visible and overflow-x:hidden but this won't work because if the "x" is visible, it will be considered as auto if the "y" is different. In other words, my slider works, but there is a scroll bar added to show my dropdown, which is very ugly.
I saw on another post to wrap it around a larger container, and I only hide the "x" while my "y" will fall back into the larger container. I can not do that since my carousel will break if the structure is not maintained.
So my question is : How can I do so that my slider looks good (we don't see the tabs sliding in and out) as well as my dropdown menu is showed up!
Here is the link if you want to check this out : https://decktogo.com/pages/downloads_user-manual_brochures
On large screen, you won't see anything wrong. Resize your browser window so that the width of it is around 380px. The slider will come in play and you will see the mess.
If you want my code, you can right click and inspect my website page to look at all the code there.
Thank you for your help,
Jonathan
Problem solved! Unfortunately, it didn't seem to have a good answer for that. So I did an overflow-x: hidden so that my carousel works fine. To solve the dropdown problem, I put a height:400px with margin-bottom:-300px which result in the good final looking with all what it supposed to be. It is just unfortunate that overflow-x and overflow-y doesn't work in that way.
.download .carousel-inner.onebyone-carosel {
margin:0 40px;
overflow-x:hidden;
width: auto;
height: 400px;
margin-bottom:-300px;
z-index: 4;
}
.download .carousel-inner{
overflow: initial;
}
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
I had the same issue at the bottom, but this resolved it White gap at the bottom of web page
I tried doing the same thing for the right but nothing happens.
It seems to only happen at a certain window width.
The Problem is width of your form element(width: 48.821174201%;).
Solutions:
#plans .affiliateSection form
{
background-color: red;
/* Add width:auto;*/
width: auto;
}
OR
#plans .affiliateSection
{
overflow:hidden;
}
Jsfiddle
There is a fair amount of bad HTML markup on this page. I would start by fixing the mismatched tags. View source in FireFox and you'll see that it will light up all of the errors in red text. You can hover over the errors and see what the problem is.
After you've fixed the HTML markup. You can look into what is causing the white gap to the right of your page. It is due to several elements on the page that are too wide, or have too much margin to the right of them. Use your browsers inspector to find and fix these elements one at a time.
So, I want to set next to each other a Facebook like button(html5) and a Twitter tweet button.
Everything is set here: http://jsfiddle.net/tGujU/
I have one big problem when I click on the facebook like button.
Because it will show the comment pop-up (which I want to see poping-up), the facebook iframe get then resized to 450px. Once the pop-up disappears, the iframe is not resized to small dimension !
I set the design so no big space is created between the two buttons.
But the problem is then, once you click on the facebook like button, you cannot click on the tweet button anymore because the wide facebook iframe is covering it.
What I tried:
Use overflow:hidden on the div#facebook_button but then, I don't get to see the comment pop-up. => NG.
Change the iframe z-index to got the twitter iframe on the top => Did not work.
Add a listener on the FB iframe to try setting overflow:hidden at the right time and remove it when needed but could not find a way to listen to its changes.
What I want to do:
Keep providers in this order and not put Facebook on the right.
See the FB comment pop-up once like button is clicked.
Being able to click the tweet button after I click th FB button.
Having it supported in IE8+, FF4+ and Chrome.
Any help is welcome.
You could raise the z-index of the Twitter button (iframe), so that it is higher than any of the Facebook stuff.
#twitter_button iframe{
z-index:9999;
position:absolute
}
Not the prettiest solution, but it works (see the Fiddle).
.fb-like { width: 75px; } is what I do.
This is what I tend to do...
/* make the like button smaller */
.fb_edge_widget_with_comment iframe {
width:47px !important;
}
/* but make the span that holds the comment box larger */
.fb_edge_widget_with_comment iframe.fb_iframe_widget_lift {
width:450px !important;
}
The first bit of CSS sizes the like button however you want (in this case it's sized to hide the count bubble). The 2nd bit of CSS ensures that the comment box will be visible when the button's clicked.
Did you try giving it a fixed width of 120px. I think that would cover it