So, I've spent about 9 hours straight on this, and I was wondering if anyone could help me.
For some reason, this block of code shifts over my navbar to the left by about a pixel. I don't really understand why, I thought I screwed up with some tags, but after experimenting, I've narrowed the problem down right to [here][1].
[1]: http://pastebin.com/2iZwnFZs (not available anymore)
Figured it out!
A friend told me to use CSS to fix this, here's the CSS I used:
body {overflow-y: scroll; overflow-x: hidden;}
The cause of the navbar shift was the scroll bar, the code above will hide the scroll bar when it overflows data horizontally.
Related
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 am having a problem when I open a Bootstrap modal, it sort of moves the entire website a bit. I checked this question out, but adding .modal-open { overflow: scroll } did not help me, as yes, it made it keep the right side scroll bar, but the problem was not that it disapeared, just that it moved the whole website a little to the right - this also resulted in a bottom scrollbar, affecting the footer.
I am basically just looking for a conclusion where triggering a Bootstrap modal does not move my entire website, this gif demonstrates it;
I have not added other custom css affecting the .modal-open other than overflow: scroll. Although I have tried setting it to overflow: auto and hidden ect., nothing really helped.
It looks like problem with overlay - can you check out it's styles?
Any idea's why my nav is showing up under the header and not inside next to the logo?
I spent all day yesterday designing a page just like this. Same everything on design and pretty much the same on coding, except I used DW fixed pixel (or liquid, but i think fixed), but after seeing a course on Lynda.com I decided to redo it in DW's new fluid grid layout (which I love a lot more (never used before)).
I've tried several things (i.e logo image align left etc) to no avail.
Screenshot
Comment Entering inspect mode and resizing the header div shrinks the menu, so it know's it's in the header
P.S. Danko thanks for the screenshot assist. On allowing it to be posted.
Answered in comments. Credit goes to David Randall.
Added div's logo and menu to elements in header div per something I was going to try (floating left). While this brought them inline together it popped both out of header.
Dave suggested
overflow: hidden;
Worked perfect.
I'm having a little trouble here: ..
Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.
I'm using wordpress for this website with some modifications to a basic theme that I've made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you'll notice that the menu overlaps with the content.
How can I make it so that they don't overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.
Not sure how I should go about this... any help would be appreciated!
Thanks!
As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu
To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you're after ..
Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:
The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..
If you look at http://wilwaldon.com/JLS10/dine.html in IE7 (the devil) you will see a horizontal scroll bar at the bottom of your browser. I've tried to hide the overflow of pretty much every <div> and I've taken out every element in the layout one by one to see what could be causing this issue. I just can't seem to wrap my brain around it right now. Firebug isn't helping either.
Any help would be greatly appreciated:) Thanks in advance.
The problem is caused by position: absolute on #summer.