htmlioscssmobile-safari

Center Content when Horizontal ScrollBar

I am designing an adaptative html template that should be usable both on desktop and mobile browsers. Inside the content I have a fixed table that is scaling down its font-size (title and cells) until a certain limit using media-query. Below that limit the table is too dense to become readable at that font size so we prefer to keep it even if it is a bit outside of the visible part of browser in mobile.

For most of the mobiles and desktops this isn't an issue because the content is aligned to the center and there is a horizontal scrollbar for viewing the part of the table that is outside of the viewport.

But Safari on iPhone tries to fit everything in the visible area in fact shifting the content on the left and leaving a big empty area on the right, just to fit the table in.

In the image below, the orange rectangles represent the viewport, the green one the content and the "Div" rectangle the table not fitting inside the viewport. Note that on the image on the left the part of the Div that is exceeding is not visible (I'm fine with this solution). enter image description here

How can I achieve in css always the result of the image on the left?

These are the relevant parts of the html:

<body>
    <div class="container">
        <div class="row section">
            <div class="col content">
                <table width="100%">
                    <tbody>
                        <tr>
                            <td rowspan="2">
                                <div align="center" class="Style1">
                                    title
                                </div>
                            </td>
                            <!-- Many Other <td></td> HERE -->
                        </tr>
                        <!-- Many Other <tr></tr> HERE -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

And the Css:

/*Grid System*/
.col {
    padding: 0 1.5em;
}
.row .row {
    margin: 0 -1.5em;
}
.row:before, .row:after {
    content: "";
    display: table;
}
.row:after {
    clear: both;
}
@media only screen {
    .col {
        float: left;
        width: 100%;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
}


/* Mobile really small dispalys */
@media only screen and (min-width: 2em) {

    table {
        font-size: 0.4em;
    }

}

/*Mobile normal diaplay*/
@media only screen and (min-width: 12em) {

    p, ul {
        font-size: 0.875em;
    }

    table {
        font-size: 0.7em;
    }

    .feature:first-child,
    .info:first-child {
        border-right: 1px dotted #aaa;
    }

    .container {
        padding: 1em;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.625em;
    }

}

/*Tablets*/
@media only screen and (min-width: 54em) {
    .content {
        border: none;
        margin-bottom: 0;
        /*border-left: 1px dotted #aaa;*/
    }

    .info:first-child {
        border: none;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.8em;
    }
}

/*Desktop*/
@media only screen and (min-width: 76em) {
    .info:first-child {
        border-right: 1px dotted #aaa;
    }

    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2em;
    }
}

/* General styles*/
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
}

.container {
    margin: 0 auto;
    max-width: 90em;
    padding: 1em 0;
}

.row.section {
    margin-bottom: 4em;
}

.content {
    margin-bottom: 1.5em;
}
Solution

  • It was sufficient to set:

    .container {
    overflow: auto;
}