CODEWITHSUNDEEP
htmlcssmobile
Lavios
Lavios

Reputation: 1179

Extra white space in the webpage on the mobile devices

There is a weird gap on the right when the website is viewed on mobile devices, How to get rid of it? I want the webpage to fill the entire width of the screen.

I know, There are a dozen of question on the same exact thing and I've read plenty of them. None of them worked.

I'm also attaching an image of the problem.

Things that I've tried - overflow-x: none margin: 0px padding: 0px width: 100%

To see the problem, you could just go to the website and view it on a mobile device or the attached image or the dev tools.

Unfortunately, the css is unreadable, as I'm written it is sass, I'll attach the HTML and the sass in the question or you could just view the entire thing on GitHub.

HTML

<header><h2>Tic Tac Toe</h2></header><button id="theme">Change Theme    </button>

<div id="main">

<div id="first" class="default">
</div>

<div id="second" class="default">
</div>

<div id="third" class="default">
</div>

<div id="fourth" class="default">
</div>

<div id="fivth" class="default">
</div>

<div id="sixth" class="default">
</div>

<div id="seventh" class="default">
</div>

<div id="eight" class="default">
</div>

<div id="nine" class="default">
</div>
</div>

SASS

 #first,#second,#third,#fourth ,#fivth,#sixth,#seventh,#eight,#nine
    display: flex
    justify-content: center
    position: relative
    align-items: center
    box-sizing: border-box
    float: left
    width: 33%
    height: 33.3333%
    z-index: 1000

When viewed on chrome dev tools

Upvotes: 0

Views: 119

Answers (3)

Lavios
Lavios

Reputation: 1179

I fixed it!

It was the #theme, it had an extra 10px margin to the right, I just removed it and it worked. Updated the website.

Thanks, anyways.

Upvotes: 0

Tony Wu
Tony Wu

Reputation: 1107

#main,#buttons,#scoreboard,head,button
{
  margin:0 auto; 
}

Upvotes: 0

tao
tao

Reputation: 90013

On line 208 of index.css you define

.static #first, .static #second, .static #third, .static #fourth, 
.static #fivth, .static #sixth, .static #seventh, .static #eight, 
.static #nine {
    /*...*/
    width: 33%
    /*...*/
}

Change that to width: 33.3333%;. Should fix the slight tilt of the tiles to the left.

More importantly, add

html, body {
    min-width: 100vw;
    overflow-x: hidden;
}

to make sure your page is always equal to viewport width.

As a sidenote, on line 189 of the same file, overflow-x should be hidden, not none.

Upvotes: 1

Related Questions