Website shows white space on the right part of page
Question
We are making a website in a team, and we struck at the famous white blank space in the right of page problem. We are looking for other possible causes.
In the homepage, there is a blank white part on the right for
- iOS(Iphone5 and Ipad, browsers are Safari and Chrome)
- Mac(Browsers are Safari and Chrome)
- Ubuntu(Firefox)
but, the same problem is not seen in the Android with chrome or Ubuntu with chrome.
We have tried the following suggestions in the StackOverflow, but no luck.
- Setting body and html margin and padding 0
- Setting img width 100%
- Checking font sizes(most of them is defined 1.2 rem)
Also, I have checked each layout in the dev tools, but none of them appears to exceed body width.
We have also tried to add an extra div after footer, or changing position:fixed to-the-page-top, but the result were the same.
Anyone have a sugguestion?
html, body, div, span, {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
input, button, textarea, select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*all-1.css*/
@charset "UTF-8";
html {
font-size: 62.5%;
}
body {
position: relative;
background-color: #fff;
color: #333;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
font-family:'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
.tyousei{}
.clearfix::after{
content: '';
display:block;
clear: both;
}
.btn img{
height:40%;
margin-top: 10px;
margin-left: 10px;
}
.btn .right-icon{
position: absolute;
top: 7px;
right: 10px;
}
.btn::before{
content: "";
position: absolute;
left:0%;
bottom:0px;
display: block;
width: 0%;
height: 2px;
background: #2F4D55;
transition: all .4s ease;
}
.btn:hover::before{
width: 100%;
}
#up-btn a{
position: fixed;
right:1%;
bottom:40%;
z-index: 5;
opacity: 0.8;
text-align: center;
height:50px;
width:50px;
padding-top: 8px;
border-radius: 25px;
background-color:#666;
}
#up-btn img{
display: inline-block;
width:65%;
height:75%;
}
.header{
width: 100%;
font-size: 0;
}
.global-navi{
height: 50px;}
.logo{
max-width: 250px;
width:40%;
min-width:200px;
float: left;
padding:20px 10px 10px 20px;
background-color: rgba(255,255,255,0.4)
}
.logo img{
display: block;
width: 100%;
height: auto;
}
.form-top{display: none;}
.sbox > *{
font-size: 1.2rem;
}
.form .sbtn{
width:34px;
height: 28px;
position: absolute;
left:517px;
top: 12px;
border:none;
font-size:20px;
outline: 0;
}
.suggestion{
border-bottom: solid 1px #666;
border-right: solid 1px #666;
border-left: solid 1px #666;
z-index:10;
}
.suggestion:hover{
background-color: rgba(240,240,240,1);
}
.word-suggestion{
width: 236px;
height: 30px;
font-size: 16px;
text-align: left;
padding: 7px 5px;
background-color: rgba(255,255,255,1);
color:#333;
}
.article-suggestion{
width: 350px;
height: 75px;
font-size:16px;
padding: 5px;
background-color: rgba(255,255,255,1);
}
.article-suggestion-title{
position: relative;
height:18px;
overflow:hidden;
font-weight:normal;
letter-spacing: 1px;
line-height:18px;
margin-bottom:12px;
text-decoration: underline;
color:#333;
}
.article-suggestion-desc{
position: relative;
height:30px;
overflow:hidden;
font-size:14px;
line-height: 16px;
color: #666;
padding-left:6px;
}
.article-suggestion-desc::after{
content: "";
position: absolute;
top:0px;
left:0px;
width:3px;
height:100%;
background-color: #74c0d5;
}
.article-number{
width: 350px;
height:30px;
background-color: rgba(255,255,255,0.7);
z-index:20;
font-size:14px;
color:#666;
text-align: center;
padding-top: 7px;
}
.result{
position: absolute;
top:41px;
left:282px;
z-index: 20;
}
#no-result{
width: 350px;
height:210px;
background-color: rgba(255,255,255,1);
border-bottom: solid 1px #666;
border-right: solid 1px #666;
border-left: solid 1px #666;
font-size:16px;
line-height:20px;
padding:10px;
z-index: 10;
}
#no-result .kobetuba-mail-link{
display: block;
width:80%;
height:60px;
text-align: center;
margin:10px auto 5px;
border: solid 1px #666;
padding: 2px;
cursor: pointer;
border-radius: 3px;
position: relative;
}
#no-result .kobetuba-mail-link img{
height:32px;
}
#no-result .kobetuba-mail-link p{
font-size: 16px;
color:#666;
}
#no-result .right-icon{
position: absolute;
top:15px;
right:5px;
color:#666;
}
#no-result .kobetuba-mail-link:hover{
background-color: rgba(230,230,230,0.6)
}
@media (min-width: 800px){
.form-top{
display: block;
position:relative;
}
}
.navi-box{
float:right;
}
.navi{
display: inline-block;
vertical-align: middle;
padding: 5px 2px;
}
@media (max-width:365px){
.article-and-toiro{
display: none;
}
}
@media (min-width:768px){
.article-and-toiro p
{font-size:16px;}
}
.message-box :hover{
opacity: 0.3;
}
.account :hover{
opacity: 0.7;
}
.article-and-toiro:hover {
background:rgba(255,255,255,0.2);
}
.navi-icon a{
position:relative
}
.navi-icon span{
display: inline-block;
top: -45px;
left: 30px;
width:20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
position:absolute;
color: #666;
text-align: center;
line-height: 20px;
vertical-align: middle;
font-size:16px;
}
.wrapper {
width: 96%;
min-width: 320px;
max-width: 1200px;
padding-bottom:50px;
margin: 10px auto 20px;
}
footer{
display: none;
}
@media (max-width:800px){
footer{
display: block;
}
footer{
box-shadow: 0px -3px 4px -2px rgba(0, 0, 0, 0.1);}
.footer-bottom {
width: 100%;
position: fixed;
bottom: 0;
height:44px;
border-top:double #2F4D55;
background-color: #fff;
padding-top: 5px;
/*background-color:#2F4D55;*/
}
.footer-bottom.close{
box-shadow: 0px -6px 8px -2px rgba(0, 0, 0, 0.3);}
.footer-bottom img{
height:70%;
display: block;
margin:0 auto;
}
.footer-open{
width:100%;
position: fixed;
bottom: 0;
background-color:#fff;
z-index: 10;
}
.footer-bottom.open{
border-top:solid 1px #696969
}
.category-list-bottom {
width:100%;
position: fixed;
top:0px;
bottom: 0px;
left:0px;
right:0px;
overflow-y: scroll;
height:100%;
text-align: center;
background-color:rgba(255,255,255,0.9);
box-shadow: 0px -6px 8px -2px rgba(0, 0, 0, 0.3);
}
}
.category-list-bottom{
}
.close-btn{
height:30px;
background-color: rgba(100,100,100,0.3)
}
.down-icon{
color: #666;
}
.category-list-bottom .form-bottom{
display: inline-block;
width: 100%;
padding-bottom:10px;
position: relative;
}
.category-list-bottom .form .sbtn{
position: absolute;
top:41px;
left:10px;
width:40px;
height:40px;
border-radius:20px;
background-color: transparent;
border:solid 2px #2F4D55;
color:#737575;
box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.3);
}
.category-list-bottom .form-bottom{
display: inline-block;
width: 100%;
}
.category-list-bottom .form .sbox{
position:absolute;
top:18px;
right:11%;
left:2%;
width:85%;
height:44px;
font-size: 16px;
border:solid 1px #535353;
}
.category-list-bottom .form .sbtn{
position: absolute;
top:20px;
right:2%;
left:88%;
border-radius: 50%;
}
.result-word-suggestion{
position: absolute;
top:64px;
right: 11%;
left: 3%;
width:85%;
z-index: 10;
}
.result-article-suggestion{
position: absolute;
top:64px;
right: 11%;
left: 2%;
width: 95%;
z-index: 10;
}
.form-bottom .word-suggestion{
width:100%;
height: 64px;
/* font-size: 16px; */
z-index: 100;
background-color: #f2fbfd;
}
.form-bottom .article-suggestion{
width: 100%;
z-index: 100;
text-align: left;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
}
.form-bottom .article-number{
width:100%;
z-index: 100;
text-align: center;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
}
.form-bottom .article-suggestion:hover,.form-bottom .article-number:hover{
background-color: rgba(255,255,255,1);
}
#form-bottom-no-result{
width:100%;
z-index: 100;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
border-bottom:solid 1px rgba(0,0,0,0.3);
font-size: 16px;
padding: 10px;
line-height: 20px;
color: #666;
text-align: left;
}
#form-bottom-no-result .kobetuba-mail-link{
display: block;
width:95%;
margin:10px auto 5px;
height:70px;
padding: 3px;
border: solid 1px #666;
border-radius: 3px;
font-size:16px;
text-align: center;
position: relative;
cursor: pointer;
}
#form-bottom-no-result .kobetuba-mail-link img{
max-height:60%;
max-width:95%;
}
#form-bottom-no-result .kobetuba-mail-link .right-icon{
position: absolute;
top:50%;
right:10px;
color:#666;
}
#form-bottom-no-result .kobetuba-mail-link:hover{
background-color: rgba(230,230,230,0.4)
}
.category-list-bottom .category-list-wrapper{
padding:55px 7px 7px;
text-align: left;
min-height:370px;
height:90%;
}
.category-list-bottom .category-list{
margin-top:5px;
margin-bottom:5px;
position: relative;
height:35%;
border:solid 1px #acabab;
border-bottom:solid 2px #2F4D55;
background-color:rgba(255,255,255,0.5)
}
.category-list-bottom .category-list-img{
position:absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
padding-top:2px;
padding-bottom:2px;
}
.category-list-bottom .category-mini-list-wrapper li{
height:44px;
list-style: none;
margin:6px 10px 6px 10px;
padding:12px 7px;
background-color: rgba(200,200,200,0.5);
border-radius: 7px 22px 22px 7px;
zoom:0.8;
position: relative;
}
.category-list-bottom .article .category-mini-list-wrapper li{
display: inline-block;
width:47%;
margin-top:3px;
margin-bottom:3px;
margin-right: 0px;
}
.category-list-bottom .right-icon{
color:#666;
position: absolute;
top:50%;
right:5px;
transform:translateY(-50%);
}
.category-list-bottom .category-list.torio{
height:25%;
border-radius: 3px 22px 22px 3px;
text-align: center;
}
.category-list-bottom .category-list.torio img{
zoom:0.8;
}
.category-list-bottom .category-list.torio .new-icon{
margin-top:40px;
padding-left: 160px;
width:210px;
}
.category-list.all-close{
height:35%;
}
.category-list.close{
height:30%;
min-height:80px;
}
.category-list.close .category-mini-list-wrapper,.category-list.all-close .category-mini-list-wrapper{
display: none;
}
.category-list.open{
height:auto;
border:none;
}
.category-list.open .category-list-img{
display:block;
position:relative;
top:0;
left:0;
transform:none;
margin:5px auto;
}
.category-list.open .right-icon{
display:none;}
.category-list.open .category-mini-list-wrapper{
display:block}
@media (max-width:500px){
.category-list.close{height:44px}
}
@media (max-width:346px){
.category-list-bottom .article .category-mini-list-wrapper li{
display: inline-block;
width:45%;
}
.category-list-bottom .article .category-mini-list-wrapper img{
zoom:0.9;
}
}
@media(min-width:500px){
.category-list-bottom .kobetuba .category-mini-list-wrapper li{
display: inline-block;
width:46%;
margin-top:3px;
margin-bottom:3px;
}
.category-list-bottom .kobetuba .category-mini-list-wrapper img{
zoom:0.9;
}
}
/* hp_style-1.css */
@charset "UTF-8";
html {
font-size: 62.5%;
}
body {
background-color: #fff;
color: #333;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
color: #7C5119;
text-decoration: none;
}
font-family: 'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
.header{
width: 100%;
}
.main-visual{
height: 250px;
background-image: url(../img/main-visual-mini.jpg);
background-position: center center;
background-size: cover;
position: relative;
}
#vision{
padding:10px;
position: absolute;
top:40%;
right:2%;
width:45%;
min-width:270px;
max-width:450px;
z-index: 0;
}
@media(max-width:568px){
#vision{background-color: rgba(237,231,221,0.8)}
}
@media (min-width:500px){
.main-visual{
background-image: url(../img/main-visual.jpg);}
}
@media (min-width: 800px){
.main-visual{
height:450px;
background-image: url(../img/main-visual.jpg);
position: relative;
background-position: center;
}
#vision{
background-color: transparent;
}
}
@media (min-width: 1020px){
#vision{
top:30%;
width:55%;
left:55%;
}
}
.sbox{
border:solid 1px #535353;
background-color: rgba(255,255,255,0.3)
}
.form .sbtn{
color:#999;
/*ここから臨時対応*/
border-leftsolid 1px #737575;
}
.sbtn:hover{
color#151e76;
}
.suggestion{
border:none;
border-bottom: solid 1px #666;
}
.suggestion:hover{
opacity: 1;
background-color: rgba(255,255,255,0.9);
}
.word-suggestion{
background-color: rgba(255,255,255,0.4);
}
.article-suggestion{
background-color: rgba(255,255,255,0.7);
}
#no-result{
background-color: rgba(255,255,255,0.8)
}
.message-box :hover{
opacity: 0.6;
}
.account :hover{
opacity: 0.6;
}
.category-navi{
display: none;
}
/*タブレット縦以降*/
@media (min-width: 801px){
.category-mini-list{
list-style-type:none;
}
.category-navi{
display: block;
width: 100%;
height: 50px;
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom: 0px;
border-bottom:double #022567;
font-size: 0;
padding-left:5%;
padding-right:5%;
text-align: center;
}
.category-list {
display: inline-block;
position: relative;
width: 30%;
top:0px;
min-width: 130px;
height: 50px;
vertical-align: middle;
padding-left: 16%;
padding-right: 16%;
}
.category-list-button{
position:absolute;
width: auto;
max-width: 280px;
top:0;
bottom: 0;
left: 0;
right:0;
margin: auto;
cursor: pointer;
}
.category-list-img {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%)translateY(-50%);
width: auto;
max-width: 100%;
height:auto;
margin: auto;
}
.category-list.toiro .category-list-img {
top: 50%;
}
.category-list:hover{
background:rgba(116,192,213,0.3);
}
.category-mini-list-wrapper{
display: none;
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom:50px;
left:0;
width:100%;
height:192px;
opacity: 0.9;
text-align: center;
}
.category-mini-list{
width: 100%;
padding:10px 15px;
}
.category-list-mini-img {
width:auto;
max-width: 100%;
height:auto;
}
.category-mini-list:hover{
background: rgba(116,192,213,0.1);
}
.category-list.toiro .new-icon{
margin-top:15px;
padding-left: 55px;
width:100px;
height:40px;
}
}
.wrapper{
padding-top:20px;
}
section{
margin-top: 40px;
}
@media (min-width: 920px){
.wrapper{
width: 90%;
margin: 20px auto 40px;}
}
@media (max-width:800px){
.recomend,.new {
width:100%;
}
}
@media(min-width:800px){
.new{
width:
}
}
1 answers
solution1
0 ACCPTED 2018-10-04 13:46:48
Maybe you didn't set the body/html width and height.
Try this:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I added
overflow-x: hidden
You should remove this line, if you need to scroll left and right.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My website shows a white space on the right side, only on mobile
body shows white space on the right
White space on right of page
Website shows white space on mobile
Big White space on right of website
White space on right side of page
White space on right of page - mysterious
Unwanted white space on right of website html/css
Why is there a white space on the right side of my website?
Huge White Space on Right Side of Website
Related Tags