How to delete automatic 8px white margin on page's right side? With the help of answerers I have fixed it in browsers on desktop, e.g. chrome (v48) and IE (v11). And also fixed it in chrome on mobile, but other mobile browsers still shows that margin. Could anyone please help me with that?
PS.
E.g. https://css-tricks.com/ doesn't have right-border at all on total page
But e.g. http://www.voice.fi/ does have right-border on desktop but not on mobile.
Via our back-and-forth in comments, here's an answer to remove blank space on the right in mobile.
CSS
html,body {
height: 100%;
margin: 0;
overflow-x: hidden;
padding: 0;
width: 100%;
}
I think what you need is this at the top of your CSS file:
* {
margin: 0;
paddding: 0;
box-sizing: border-box;
}
This removes the automatic 8px (in Safari) margin of the body.
#Josh S. I found the solution. First, well as you said I used reset CSS from this website: http://html5doctor.com/html-5-reset-stylesheet/
And then I used in my screen styles CSS these:
body {overflow-x: hidden}
nav {overflow-x: hidden}
And voila, now it works in all desktop and mobile browsers.
Related
I developed different responsive boxes for the news in the website I'm working in. And everything seems to be working fine except for the news inside the slider on the top of the main content. It displays properly in Chrome, Opera and even in Internet Explorer, but not in Firefox. The problem seems to be in the article elements, specifically in the following lines of CSS code:
.home .first-level-post {
margin: 0px;
width: 100%;
padding-top: 45.1613%;
}
It's supposed to have a height of 280px, that's why I chose 45.1613% as its value. The container's width is of 620px, and it's 45.1613% is 280px.
When I switch the padding-top property off, it takes the 93.3333% value which belongs to the article elements present outside the slider (which are 300px wide), displaying as it should, but that value does not work in the other browsers.
I've been dealing with this for a while I can't seem to find a solution.
You can properly check this issue right here.
Thanks in advance, guys :)
Firefox is interpreting your padding based on a height of 0 due to inheriting from your .home article class.
Changing your CSS to this seemed to fix the issue for me in Firefox and not have an adverse effect in Chrome:
.home .first-level-post {
height: 100%;
margin: 0;
padding-top: 45.1613%;
width: 100%;
}
I'm fairly new to CSS responsive coding. I've used a premade boostrap template and modified it. Its working fine. The only issue is when this website is viewed on Firefox responsive design tool at different size a mysterious white space appears after the footer.
Check the screenshot below for the mysterious white space being shown when i try to view the webpage on Firefox responsive design tool at: 768x1024 . How do we remove or hide this extra space ? I have tried; overflow:hidden; but its not working. Check this Website Link for the online version of the page
Please check the image screenshot.
That space is due to the site not being 'long or tall enough' for that specific device. You can fix it by instead of using height:auto on your .wrapper element, use height:100vh.
.wrapper {
min-height: 100%;
height: 100vh !important;
margin: 0px auto -155px;
border: 1px solid #F00;
}
100vh will get the vertical height of the specific viewport that it is being used on so it will always take up the screen.
Here is a little more on Vertical Viewport Heights
Hope this helps!
It is your footer element which is at the bottom of the page.
.footer, .push {
height: 155px;
}
Also, your fix is a greasy on and won't work always:
.wrapper {
margin: 0 auto -155px;
}
I am using Bootstrap 3.3 for a simple layout and the way I have it is:
For the body,html:
html,body{
background: #fff;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
and then on each child section I have the following code:
.section-name{
height:100%;
}
so that each section takes up 100% of the given device screen size. Now I don't know why but I have quite a big gap between each section, see the screen shots below:
Notice the gap between the section, here's another screenshot:
Now I went to the dev tool, in both Mozilla and Chrome, checked for any excessive padding or margin issues, but found none.
Then I checked if it was because of the white spaces in my html, took off the whitespaces and still that wasn't the issue.
I took off all the Bootstrap CDNs too, just to check if it was a Bootstrap issue and no it wasn't, even in the custom CSS I have written, the same issue persists.
I have even tried:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
Even that wouldn't take off the padding
Edit
Js fiddle depicting my problem
I think I have found the solution you had a h2 inside your .section name that took margin-top of 20px,
Here the js fiddle
.section-title {margin-top:0px;}
http://jsfiddle.net/u2ttpkhg/1/
Is better if you could provide a fiddle, but here goes some things that I need to do sometimes:
Try to check above level elements too.
Also, you're using jumbotron? If so, it adds a top/bottom padding of 48px (via media query), take a look in that. Bootstrap has, by default, many classes which add unwanted paddings and margins.
I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.
I have checked everything on my page and cannot figure out what is giving my website a large right-margin in iOS. It's driving me crazy. I've tried setting overflow: hidden; on the body to no avail. There is nothing that is wider than 960px. This is a very responsive design and all is working well except this one infuriating thing. Here is the URL to the dev site: http://ourcityourstory.com/dev/
Please see attached screenshot:
Any help would be appreciated.
Update: I've tried fooling with the viewport. See this Stackoverflow post. But to no avail. I built the entire site off of the HTML 5 Boilerplate
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Add this to your CSS. then it should be working fine
The culprit was the Facebook share button. Instead of behaving like Twitter or Pinterest it iframes in and sets a width on the body of 500px!
A simple overflow: hidden; on my .social class fixed this.