Basic Responsive Code for Website with CSS

by Dinesh 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;
}
}

Tagged in:

956
like
0
dislike
0
mail
flag

You must LOGIN to add comments