CODEWITHSUNDEEP
javascriptjquerycsshtml
acg
acg

Reputation: 513

Mobile Site - Empty area on the right

I have a mobile website and I'm facing an empty area on the right (when I scroll the page to the left), as you can see below:

1 - Normal page:

enter image description here

2 - Scrolling page to the left:

enter image description here

All the page content is inside of "container" id. The site is divided by 5 divs, called "secao".

body{
    background-color: #323031;
    padding: 0;
    margin: 0;
    font-family: Planer;
    color: #FFF;
    font-size: 10px;
    overflow-x: hidden;
}

html, body {
    height:100%;
}

#container{
    width: 100%;
    display: none;
}

.secao{
    position: relative;
    float: left;
    width: 100%;
}

If I change .secao CSS inserting border: 1px solid red, I got it:

enter image description here

Here you can find the website: http://www.camona.com.br/ideaos/site/laboratorio/mobile/

Could you please help me to find a solution to this issue?

Thanks.

Upvotes: 0

Views: 72

Answers (2)

Mike Schmidt
Mike Schmidt

Reputation: 321

If you haven't already, putting 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

in the <head> section should do the trick. You can read more about it if you wish here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Upvotes: 0

Marco Pietro Cirillo
Marco Pietro Cirillo

Reputation: 864

Looks like your FB like iframe is increasing the page width. There may be more things like this increasing the width.

Upvotes: 1

Related Questions