CODEWITHSUNDEEP
htmlcss
FET
FET

Reputation: 942

Content out of window

I'm making a website, and it should be responsive, but my whole content instead, in some screens is out of the window's width. This shouldn't happen.

This is the HTML code for my main div which contains also a container div which is inside each <section>:

<div id="main">

        <!-- Navigation Bar -->
        <div id='cssmenu'>
            <!-- Code cut -->
        </div>
        <!-- / Navigation Bar -->

            <!-- Intro -->
                <section id="top" class="one dark cover">
                    <div class="container">

                        <header>
                            <!-- Code cut -->
                        </header>   
                    </div>

What should the CSS look like to make it responsive so that it won't go outside the window's width but (for example) collapsing the table datas instead? Let me know what you think would be better to solve this issue.

Every item of the content (such as image, countdown, tables..) is out of the window's width.

Here is the most relevant CSS:

Containers:

/* Containers */

.container {
    margin-left: auto;
    margin-right: auto;
}

.container.\31 25\25 {
    width: 100%;
    max-width: 1750px;
    min-width: 1400px;
}

.container.\37 5\25 {
    width: 1050px;
}

.container.\35 0\25 {
    width: 700px;
}

.container.\32 5\25 {
    width: 350px;
}

.container {
    width: 1400px;
}

@media screen and (min-width: 961px) and (max-width: 1880px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 1500px;
        min-width: 1200px;
    }

    .container.\37 5\25 {
        width: 900px;
    }

    .container.\35 0\25 {
        width: 600px;
    }

    .container.\32 5\25 {
        width: 300px;
    }

    .container {
        width: 1200px;
    }

}

@media screen and (min-width: 961px) and (max-width: 1620px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 1200px;
        min-width: 960px;
    }

    .container.\37 5\25 {
        width: 720px;
    }

    .container.\35 0\25 {
        width: 480px;
    }

    .container.\32 5\25 {
        width: 240px;
    }

    .container {
        width: 960px;
    }

}

@media screen and (min-width: 961px) and (max-width: 1320px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 125%;
        min-width: 100%;
    }

    .container.\37 5\25 {
        width: 75%;
    }

    .container.\35 0\25 {
        width: 50%;
    }

    .container.\32 5\25 {
        width: 25%;
    }

    .container {
        width: 100%;
    }

}

@media screen and (max-width: 960px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 125%;
        min-width: 100%;
    }

    .container.\37 5\25 {
        width: 75%;
    }

    .container.\35 0\25 {
        width: 50%;
    }

    .container.\32 5\25 {
        width: 25%;
    }

    .container {
        width: 100%;
    }

}

@media screen and (max-width: 736px) {

    .container.\31 25\25 {
        width: 100%;
        max-width: 125%;
        min-width: 100%;
    }

    .container.\37 5\25 {
        width: 75%;
    }

    .container.\35 0\25 {
        width: 50%;
    }

    .container.\32 5\25 {
        width: 25%;
    }

    .container {
        width: 100% !important;
    }

}

Main:

/* The main content */

.main-content {
font-family: Arial, Helvetica, sans-serif;
max-width: 600px;
padding-top: 40px;
margin: 0 0 40px 260px;
}

For reference, here is the site: http://infntest.altervista.org/index.html.

Upvotes: 0

Views: 287

Answers (3)

sarath
sarath

Reputation: 314

use footable , it is useful for designing responsive tables

http://fooplugins.com/plugins/footable-jquery/

Upvotes: 0

Gvidas
Gvidas

Reputation: 1964

From your link provided i can see that your whole .container class is out of the screen. Try to add box-sizing: border-box; css property to your .container class and this should fix your issue.

box-sizing: border-box; css property includes paddings and borders to width calculation, so then you write width:100%; padding-left:15px; you have 100%-15px of content and 15px of padding instead of 100% content and additional 15px padding. more info here

Upvotes: 0

Ionut Milas
Ionut Milas

Reputation: 328

You should try using Bootstrap. It has a class table-responsive that will resolve your issue.

Responsive tables are a pain.

I would go with div's instead and according to viewport change the properties of those divs accordingly.

Have a look at http://codepen.io/SitePoint/pen/raXdwZ for a Bootstrap implementation or https://css-tricks.com/examples/ResponsiveTables/responsive.php for a responsive table example.

Upvotes: 1

Related Questions