If you go on to my website, lookaroundyou.net and click on USA (which is where there are more video's than anywhere else on the site), the websites layout changes completely.
Does anyone have an idea as to why this happens?
I don't want to visit your site if it's crashing Firefox, but if the problem is indeed due to more content causing a scrollbar to show up and thus changing your page width, one easy way to sort that is to always display a scrollbar (it will be disabled if there is not extra content below). In this way, the width of the page will be the same regardless of length.
<style type="text/css">
html { overflow-y: scroll; }
</style>
I'm sure there's some other non-standard setting with IE that will do the same; that's left as an exercise for you.
It's causing a scrollbar because there are more videos.
I'm using chrome and I don't see any difference other than the page shifts when the scrollbar on the right appears.....
Related
I'm coding a website and getting a strange behavior on the vertical scrollbar. This is happening on Chrome, Safari, and Firefox.
On IOS, it apparently is causing issues with page scrolling (i.e., it is difficult to get the page to scroll past the bottom of the initial view)
The puzzling part is that the undesirable effect only occurs when the viewport is sized below 683px wide
683px wide and above, the vertical scroll bar behaves normally (see attached graphic)
Website url is http://157.245.80.107
Any suggestions or insight? Thanks!
The theme is badly coded.
Whoever made it didn't bother to read the intro on do's and dont's for Bootstrap v3.4.1.
The quickfix would be to remove
overflow-x: hidden;
from line 9 of _main.scss (on html, body) and apply it to .main-container instead.
Another problem (same cause, basically) is the presence of class row on #navigation2 .navigation-header .mobile-main-nav. Either remove it if you can edit that template, or apply this CSS to counter the negative margins:
#navigation2 .navigation-header {
padding: 0 15px;
}
One of the pages in my website is having an issue where the page is scrollable on x-position which results the content to be cutoff. Other pages on this website is fine except for this one. I've fiddled with the classes and margin but for some reason I can't get it right.
(Live preview on responsive mode [mobile phones]: http://hub.mymagic.my/idea/frontend/explore)
Need another eye for this. Any help is greatly appreciated.
using chrome's toggle device toolbar + inspect source code, i was able to trace this CSS line on frontend.css:
.cbp .cbp-item {
width: 350px;
...
...
...
}
It seems that this width is making the content to extend beyond the size of mobile browser thus making it appear to be scrollable. I guess you can play or override this value somewhere or replace it with max-width attribute.
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
Whenever I have content that expands the page height, a scrollbar appears on my rendered website. However, the scrollbar pushes my content to the left by the width of the scroll bar so when I navigate to a page where the height is less then the page height, there's a noticeable jump as the page width resizes. Is it possible to have the scrollbar sit on top of all my html content? Similar to how scrolling works in Chrome on iOS.
Ideally a css property like overflow:absolute where the scrollbar appears and the content isn't clipped would be the best but I know that doesn't exist.
EDIT:
In the image below, you can see that the scrollbar has a white background and has pushed my html content to the left. What I want is the html content to be underneath the scrollbar, as if the scrollbar had absolute positioning to the right.
I conferred with one of my colleagues who's running the same version of chrome as I am and his scrollbar does exactly what I want. Maybe AB testing on Google's part?
There is no reliable cross-browser way to do what you're looking for.
Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).
If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.
Native scrollbar styling is limited, but here is a demo of how to do it:
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
http://codepen.io/zakkain/pen/phjBC
Chrome and IE respond to it very well. Firefox not so much, the issue is logged here https://bugzilla.mozilla.org/show_bug.cgi?id=77790 and is stale.
If you want firefox, you'll have to go with a custom scrollbar replacer.
And how to compensate for scrollbar is explained here: How to compensate for Vertical Scrollbar when it is not yet present
It works well, but most code pens can't show it, so you'll have to experiment on your own.
This is the OSX disappearing scrollbar issue (not sure if it's relevant for modern versions of OSX): CSS - Overflow: Scroll; - Always show vertical scroll bar?
As it would turn out, all I had to do was update my version of OSX...baffling. I'll accept #DanielBeck's answer because it's a reasonable answer to a coding question whereas here, the solution was to arbitrary update my laptop software.
I have been struggling for several hours about this problem, although it seems ridiculous I cant fix it somehow.
So this is the webpage draft, http://www.mysecretathens.gr/Sera/test.html
If you click on the Bio link, you will notice that the topbar menu on the Biography.html is moving slightly to the right.
How can we fix that? Any ideas?
p.s I have noticed that If I have the same picture in biography.html as in test.html there is no problem, the topbar remains in the saim position.
html{
overflow-y: scroll;
}
This forces a scrollbar on the right hand side
That's because your first page has a scroll bar and the bio page doesn't. You can force a scrollbar to always show up which can be annoying but consistent, or use absolute positioning to have the content always appear in a specific location, albeit probably not centered.
The content on the first page is going below your screen, meaning you will have to scroll. This isn't the same for the bio page, hence the inconsistencies, either add more content, set overflow-y to scroll or just ignore it (as users will)