Basic Responsive Code for Website with CSS
by Dinesh[ Edit ] 2014-02-17 18:42:12
Basic Responsive Code for Website with CSS
Add the following css code, and specify class rules to html file which u would like to modify.
@media screen and (max-width: 768px)
{
#banner > img
{
max-width: 100%;
}
ul.menu-list
{
height: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
li.menu-item
{
margin: 0em 0.2em;
width: auto;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch
{
width: 100%;
display: inline-block;
*display: inline;
zoom: 1;
}
a.menu-item-link
{
font-size: 1.1em;
}
#wrapper
{
width: inherit;
}
.small-box
{
width: inherit;
float: none;
}
#wrapper
{
float: none;
}
.social-bar a
{
margin-right: 0em;
}
#newsletter-form
{
font-size: 1em;
}
input#newsletter-email
{
width: 10em;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
#team-logo-bar a
{
text-decoration: none;
width: 100%;
display: inline-block;
text-align: center;
}
}