I am developing a design that is supposed to become responsive in the end. It also is supposed to look clean and simple. But while developing, I realized something: When I open the page on my Mac - Chrome - it displays fine. But upon resizing it, or opening the same page on a smaller display device, the bottom is cut off...
I have used the web inspector, changed everything that I saw to something else but couldn'T figure out where the problem is. So I really need help here, as I got lost.
The basic idea:
http://tympanus.net/Blueprints/SlidePushMenus/
The demo site:
http://dev.dragonsinn.tk
The code is hosted on a Gitlab repo on my server; here:
http://git.ingwie.me/ingwie/bird3/blob/master/cdn/themes/dragonsinn/css/main.ws.php
The problem is, that in order to simplify my CSS coding, I used my self-made CSS framework, WingStyle ( http://github.com/IngwiePhoenix/WingStyle ). It is meant to look like CSS, but offer better options for cross-browser compatiblity. So don'T get scared of the not-quite-CSS syntax :)
To reproduce the problem:
Open the site mentioned above, and resize your window. Then, open the right panel by hitting the pac-man icon (top right) and try to scroll down. You should not be able to see the version information. Resize the window, and at the bottom of the right panel, you may see a version string (BIRD#3.0.0-dev...).
How can I it possible, that it actually does scroll?
Without studying your code to deeply I'd suggest you change your panel css as follows:
.panel-side {
width: 240px;
/* height: 100%; replaced with bottom: 0*/
top: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
}
This will give you a 100% percent height container and all overflowing content will be scrollable.
Related
On the WooCommerce post editor, once you scroll down to see the rest of the content, the sidebar on the right also switches to the fixed position so that you don't have to scroll all the way back up to publish, save or make any other changes through the sidebar:
<div id="side-sortables" class="meta-box-sortables ui-sortable" style="position: fixed; top: auto; bottom: 20px;">
However as soon as you scroll up, the sidebar disappears. it seems like the position switches back to absolute:
<div id="side-sortables" class="meta-box-sortables ui-sortable" style="position: absolute; top: -933.25px;">
and when you scroll back down once again, it re-appears. at first I thought that's how it functioned until I found out it was some sort of a plugin/theme conflict:
https://wordpress.org/support/topic/product-editor-sidebar-disappears-while-scrolling/
I installed the latest copy of Wordpress and Woocommerce with their default settings on a local server and it was the same. so it looks like it has nothing to do with any sort of plugin/theme conflict. I also tried this on three different browsers (Firefox, Chrome, Edge) and they all came up with same issue. I had a couple of errors in all of them but the one that caught my attention was the following warning on Firefox:
This site appears to use a scroll-linked positioning effect. This may
not work well with asynchronous panning; see
https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html
for further details and to join the discussion on related tools and
features! post.php
I also managed to get the sidebar fixed but then I couldn't scroll the sidebar itself:
#post-body.columns-2 #side-sortables {
top: 97px !important;
position: fixed !important;
}
So if there's a simple css solution to keep the sidebar static and scrollable, that's totally fine with me.
Edit: It is also worth mentioning that once I collapse all four boxes
on sidebar (Product image, Product gallery, Product categories,
Product tags), I will never experience any scrolling issue but as soon
as I expand any one of them, the sidebar will disappear once I scroll
up. weird!
I came up fixing the issue with a better alternative.
From the Screen Options on the top right corner of your editor, uncheck "Enable full-height editor and distraction free functionality". It'll limit the height of the description box to your desired size and you don't need to scroll through a long content.
I am not sure what is causing this.. I have been looking at different smart phone screen sizes in chrome dev tools mobile view, and that random white space on the right side of my page is always there. I can't see any element that has margin showing, or padding on that side.
I thought maybe it was the bootstrap row class causing it, and I made sure to add the row inside of a container-fluid div as the docs say to do.
The weird thing is, when I hover over every element on inspecting, they all show this white space on the right; even if I hover over the html tag... So I'm thinking the issue is bigger than bootstrap at this point.
I have tried adding the following with no changes.:
html{
box-sizing: border-box;
overflow-x: none;
}
When I'm in the mobile dev tools looking at the screen, I can drag and move the cursor left and right and the whole screen shakes to fill that right blank spot... So it is not behaving like it is using border-box..
When actually viewing the live site on my phone, this shaking back and forth doesn't happen, but I still see a slight white vertical space on the right side behind the cursor.. Idk if I'm being too picky and this is just space for the cursor in the phone settings? Although I see the same blank spot on every phone size in google chrome dev tools mobile view.. I know I'm not crazy! Well not completely yet!
Also, not that it helps in this situation(I think), my site is built using .NET Core 6 MVC. I am using Bootstrap 5. I am ready to start removing my media-query css line by line to see what could be causing it.. Its not an obvious issue, but I notice it of course.
If anyone has any idea what it could be, please let me know where to start.
You have to take into account that an element's width is not just the width itself, but a sum of its width, padding, border, and margin, and sometimes border-box doesn't fix the problem.
If you're using animations on scroll like a slide from left to right or vice versa can also screw your pages sometimes.
Well I can't believe it but I had overflow-x: none, instead of overflow-x: hidden; I also had it on the wrong media query in my CSS.
Just glad I'm not crazy! lol
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 have a question regarding my website.
I have a parallax effect going on with my website but I want the text "Clinical trials" and all the text below it to stay fixed when I scroll over it, right now it just scrolls with the page how can I fix that?
I believe this is the correct way to respond instead of adding another answer. I have had similar issues with javascript working perfectly in one browser but not another. I remember Firefox causing the 'flashing' effect. So my question to you is, have you tested it on multiple browsers?
Sorry for the original response not being anything close to what you were trying to do. I read the original post and quickly scanned the tags assigned to it. By the time you had edited the original I had already answered. I am leaving the original markup incase it helps somebody else with a html/css implementation. The html/css keeps a div visible throughout the entire page. It doesn't provide the effect of keeping it visible once the user scrolls to it's location on the page.
ORIGINAL
The text you want fixed while scrolling should be in it's own div and assigned a class in the style sheet. Use top and right to position it.
HTML:
<div class="trials-fixed">Clinical trials</div>
CSS:
.trials-fixed{
position: fixed;
top: 0;
right: 0;
width: 300px;
}
The position property is explained more here.
You may have to set the z-index of the text; explained here.
Already a long time ago I started with a new homepage project. I've learnt to build up a homepage on my own, so I'm still in the learning process. Therefore, it might be possible, that I've chosen sometimes not the best way to implement something.
I'd like to have a full width header (and footer) on my webpage. For this reason I created some div tags like this one below:
.header_container_overall-1 {
height: 90px;
width: 1000px;
padding-left: 1000px;
margin-left: -1000px;
padding-right: 1000px;
background-color: #f1f1f1;
}
The problem now is, that a browser (or a mobile device) shows a horizontal scroll bar. I read in a post, that I could use "overflow-x: hidden;". I applied this snippet of code into the "body" class of my css-file. The horizontal scroll bar disappeared, but you can still scroll to the right using the arrow keys on your keyboard.
Unfortunately, I kept programming my website knowing this bug (I thought, that I will fix this later, but I think, this was not the best idea). However, I now came back to this bug and tried to fix it. I found several threads, in which the same problem occured:
kennykee.com/118/div-100-width-without-horizontal-scroll-bar/
stackoverflow.com/questions/18274386/div-overflow-is-hidden-but-still-can-scroll-using-keyboard-right-arrow-key
Then, I tried the following steps:
adding the "overflow-x: hidden;" to several classes (especially the header and footer classes) with the aim to prevent horizontal scrolling. I tried several options and in the end, I got a website, where the header and footer got clipped at the body (for example I got a width of 1000px instead of a full width).
when I tried to use "position: relative;" or "position: fixed;" in different classes, I ended up, that the main page (which is now centered because of margin-left and margin-right set to "auto") was set to the left.
I hope, you understand what I mean. It's hard to describe, even more with my bad English ;-). And as you can see, I sometimes tried stuff without even knowing, what I'm doing. It was more and more "try and error" and I came now to the desicion, that I'm at the end of my html and css knowledge to fix this problem. Maybe you can see the problem right now or maybe you have an idea, what I could try to do.
The website with the described error is available on:
http://www.airlink.ch
The css file is available too:
http://www.airlink.ch/stylesheets/layout.css
If you need any further information, please let me know. And sorry for this long explanation.
Best regards
I did not read the post much further than your CSS. I am sorry but you should not be using hacks like padding 1000 PX and margin 1000px. If you want a full width div, set the HTML and body elements to width: 100%. Then add width 100% to your header/footer div. Make sure to add the meta viewport tag for width = device width. You should do a quick google for some resources regarding device width and responsive design in general.
Hope you can get what you want working!