Archive

Posts Tagged ‘responsive Design’

Responsive Design with 2 columns Example


Responsive Design with 2 columns Example

<!doctype html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Test</title>

<style>
/*Style Start*/
/** @group personal settings **/
#info
{
float: left;
margin-bottom: 12px;
}

#Info2
{
float: right;
margin-bottom: 12px;
}
/** @group core layout **/
#w
{
border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
}
/*Style End*/
/*Responsive Design Start*/

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

#info
{
float: none;
display: block;
text-align: center;
}

#Info2
{
float: none;
display: block;
text-align: center;
}

#w
{
padding: 20px 15px;
}
}

@media only screen and (max-width: 570px)
{
}

@media only screen and (max-width: 480px)
{
#w
{
margin: 0 20px;
}
}

@media only screen and (max-width: 320px)
{
#w
{
margin: 0 10px;
}
}
/*Responsive Design End*/
</style>
<!–<link rel=”stylesheet” type=”text/css” href=”responsive.css”>–>
</head>

<body>
<div id=”w”>
<div id=”info”>
Column 1
</div>
<div id=”Info2″>
Column 2
</div>
</div>
</body>
</html>

Responsive Design

Responsive Design


Responsive Design

<!doctype html>
<html lang=”en”>
<head>
<title>Flexbox Layout Demo</title>

<meta charset=”utf-8″>
<meta name=”description” content=”” />

<style>
/* SECTIONS */
.section
{
clear: both;
padding: 0px;
margin: 0px;
}

/* COLUMN SETUP */
.col
{
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}

.col:first-child
{
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after
{
content: “”;
display: table;
}

.group:after
{
clear: both;
}

/* GRID OF THREE */
.span_3_of_3
{
width: 100%;
}

.span_2_of_3
{
width: 66.1%;
}

.span_1_of_3
{
width: 32.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px)
{
.col
{
margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px)
{
.span_3_of_3
{
width: 100%;
}

.span_2_of_3
{
width: 100%;
}

.span_1_of_3
{
width: 100%;
}
}
</style>

</head>
<body>

<div class=”section group”>
<div class=”col span_1_of_3″>
This is column 1
</div>
<div class=”col span_1_of_3″>
This is column 2
</div>
<div class=”col span_1_of_3″>
This is column 3
</div>
</div>
</body>

</html>

 

how it works:

http://www.responsivegridsystem.com/

Categories: Design Tags:

SharePoint 2013 Responsive Design Sample,