I have a website that is meant to contain a full page image and a navbar at the top. At the very beginning of my project when I encountered the current issue where a white space appears to the right of my image, I simply set overflow-x: hidden. However, now I do not have that option and must deal get rid of it properly. I have created a CodePen that recreates the problem. I have no clue what is causing the issue, any help would be really appreciated.
This post is sorta similar to this one, but I'm keeping it because I think others with the same problem as I had might be able to find it easier.
Your issue isn't that the navbar is longer than the rest of the page, it's that your row content is getting messed up by Bootstrap's default row formatting. By default Bootstrap is giving it a margin right and left of -15px, override it with a in-line style="margin: auto" and everything fits together nicely.
Related
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 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 am working on the layout of a blog, and the layout is now broken:
The right column is now sliding under the menu and I don't know what is causing this layout issue. I can't spot the trouble in the code. The page is generated out of a blogger template. It contains its own CSS.
Anyone sees the problem? The layout used to work fine. Thanks!
Simplest answer is the headers wrap (.bloginner-wrapper) is set to 'z-index:999'. Everything shouldnt be in wrapped divs, float your sidebar and content inside one responsive wrap.
I noticed two extra </div> in the code, but could not figure why these were generated. I had to restart the template modifications from scratch to solve the issue.
the site www.sterlingfoundations.com has an intermittent overflow problem with Google Chrome. It sometimes takes three times of reloading to see the problem but it pushes all of the content below Navigation (currently id="wrapper") into a narrow column with scrollbar on the left margin (it happens on all the pages of the site). The default.css gives "wrapper" an overflow: auto. When removing the "default.css" file, the fonts go to default but the layout issue is solved. So it has to do with the CSS overflow in "wrapper" I think.
One thing I noticed is the navigation bar looks like it squishes the longer phrases like "Private Foundations" and "Financial Professionals" and forces them to wrap to two lines when the problem occurs. Not sure if that's related. Any ideas? Thank you!
It doesn't look like you need overflow-y:auto on div#wrapper.
I've been working on a few sites, and for some reason, a blank bar keeps showing up at the bottom. I've tried inspecting the elements, and I get nothing that makes any sense. html and body elements are set for margin: 0 and padding: 0.
Any ideas on how to remove the blank bar at the bottom?
Thank you!
Remove the from your clearfixing divs. Even with the height:0, the space character is taking up space. One you remove it, the div will collapse properly.
Probably way off here and I'm not sure but one of the plugins you are using is placing a smiley at the bottom of the page. I think it is popular posts that does this.
Have your tried disabling the plugins one by one to see if this goes?