CODEWITHSUNDEEP
htmlcss
Salini
Salini

Reputation: 347

css code for mobile and desktop support not fit into the screen

My css code which will support mobile and desktop..

my jsfiddle link is below:--

jsfiddle link

the desktop view is:--

enter image description here and the mobile view is:--

enter image description here

But in mobile view I want 100% width of the container.B how can I do that???

CODE AND SNIPPET BELOW

body {
width: 100%;
line-height: 1;
background:#666;
}
.contanier {
margin-top: 80px;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
padding: 20px;
background: pink;
display: block;
width: 70%;
overflow: hidden;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#rightcol {
position:relative;
float: right;
display:inline-block;
width: 30%;
background:black;
margin-left:auto;
margin-right:auto;
height:100%;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
#content {
background: #fff;
float: left;
position:relative;
display:inline-block;
margin-left:auto;
margin-right:auto;
width: 68%;
height: 100%;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
@media screen and (max-width: 900px) {
#rightcol, #content {
    display:block!important;
    width:100%;
}
.contanier, #footer {
    -webkit-flex-flow: column;
    flex-direction: column;
}
#rightcol, #content {
    /* Return them to document order */
    -webkit-order: 0;
    order: 0;
}
#rightcol {
    min-height: 50px;
    /*  max-height: 50px;  */
}
}
<body>
<div class="contanier">
    <div id="content">
        <div id="loginbox">
            <div id="category">
                <div>
                    <div class="column">
                        <div class="column-title">Explore</div>
                        <div class="column-content list-of-resources">
                            <div id="left">
                                <div><a href="#">Envato</a>
                                </div>
                                <div><a href="#">Themecurve</a>
                                </div>
                                <div><a href="#">Kreativeshowcase</a>
                                </div>
                                <div><a href="#">Freebiescurve</a>
                                </div>
                            </div>
                            <div id="right">
                                <div><a href="#">Themeforest</a>
                                </div>
                                <div><a href="#">Microsoft</a>
                                </div>
                                <div><a href="#">Google</a>
                                </div>
                                <div><a href="#">Yahoo</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="rightcol">
        <div id="registration-form">
            <div class='fieldset'> <a>blackworld</a>

            </div>
        </div>
    </div>
</div>
</body>

Upvotes: 0

Views: 124

Answers (1)

ChThy
ChThy

Reputation: 251

I gave the 'html' and 'body' margin and padding 0px.

and media queries

@media screen and (max-width: 480px) {
    .contanier {
        margin: 0px;
        width: inherit;
    }
}

http://jsfiddle.net/4j00svk6/4/

enter image description here

Upvotes: 3

Related Questions