Reputation: 347
My css code which will support mobile and desktop..
my jsfiddle
link is below:--
the desktop view is:--
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
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/
Upvotes: 3