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
Related
I have a WordPress site with a really weird issue.
the template on touch screens has a really large vertical margin out of the viewport
this margin doesn't exist when I use responsive browser simulation unless I activate touch simulation then somehow the page grows that large margin.
I've been poking around the inspector trying to find out which element is causing this issue but with no luck!
I even used overflow-x:hidden, max-width:100% and max-width:100vw and nothing seems to work.
here's the link hopefully someone can point out what my eyes are missing
طريقة قياس (طريقة-قياس-قيمة-مسافة-الحدقة-قيمة-ipd-الع)
irrelevant note: the site is in the Arabic language
Ok this may seem a little bit missy but as a quick solution I fixed the problem by adding this code in a media query.
html {
width: 100vw !important;
overflow-x: hidden;
}
Let me know if it works bro.
BS: the elements that are out of proportion is the navbar and the scroll to top as per attached so if you want a clean fix then fix their CSS as they are the root of your problem
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
I'm debugging a website for a code written by somebody else. Typically I used bootstrap for responsive rows and columns but I believe this site is built on zurb-foundation.
Here is the url of the page. (www.edcast.com/privacy)
screenshot for a a visual of what i mean.
http://imgur.com/WTGDQTK
I will play around with this, but having a second eye and some other input would be highly appreciated!
Update: So far I've tried changing "overflow: visible" to hidden and auto
I've also tried to apply a clear: both to a variety of different divs
If you take a look at the image I posted below, you can see that the div with the id image-top-div is pushing everything over. You will need to resize the image and play with the margin and padding. You can see me here in the gif taking out the margin-left which solves it.
I have a html layout with a navigation bar at the top and a main content area below it, with a left and a right area. The top bar has a background gradient with a hard stop in it. The main content's right area (sidebar) has a background color that should line up with the gradient stop of of the navigation area, at 75%.
See this for a simplified version of my layout. In Firefox and Safari this renders fine, but Chrome puts the gradient stop a little further than it should. I tried to use pixel values instead of percentages, but the behaviour stayed the same.
Any idea why this is happening, and suggested workarounds? Thanks!
Specially with modern browsers that deals with anti-aliasing in so different ways. What i have done was a js fix, (which wouldn't be good for your code :D) also you would have to add a custom padding for each element. But you'll need to hire a freelancer to do it for you, because it would take a while to complete (browser targeting, getting each element, adding padding for each element...)
if u can post the code it would be simple for more possibility.however i am looking for more solutions.
My page, it keeps on getting different menu width when i zoom in and out. It is fine in IE, and no one else. I did not spot any fixed positioning, this seems to be using relative position.
have tried playing and disabling all CSS property to my menu bar through google chrome inspect element.
turn this from none to auto: " -webkit-text-size-adjust: auto "
Tried to use em ex px for my font-szie and padding. I am juiced out of ideas, save me internet!!!
www.magentek.com
Try zooming out, you will find press room gets pushed down. I got this SimplyBiz theme from wpcrunchy. It seems even the paid version have this problem too. The CSS and html is way too large to post, too much bloated codes, i think is sufficient to just use chrome inspect element.
I took a look at the site, and my opinion is that the css and js that make up the menu functionality are creating a 6th menu element. That would explain why an extra little tab is hanging off the end there. Since it doesn't have any content, the browsers are all handling the whitespace a little differently.
Did you by any chance modify the menu to take it from 6 elements to 5?