Live Testing Help

[CarraraWebsiteSolutions]

I would like to know if there is a good live testing for responsive style I have found a couple but missing widths 360 and 340 need one with full range.

[TheDoc]

What do you mean? Does resizing your browser not work for you?

[CarraraWebsiteSolutions]

@TheDoc

I am using this place to do responsive mobile and table settings http://www.studiopress.com/responsive/

Most of them only show 320 width and not 360

I just have looked on here in the media quires page

here is what I am working on just to make sure does it go like @media only screen and (max-width: 320px), @media only screen and (max-width: 360px), @media only screen and (max-width: 480px) just trying to understand it I think they are portrait and not land scape

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

#container {
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: left;
height: auto !important;
z-index: 2;
}
#header #logo {
display: none;
}
#header {
height: 300px;
}
#header #welcome {
display: none;
}
#header #responsive_welcome {
text-align: center;
padding-top: 30px;
color: #FFF;
}
#header #responsive_welcome li {
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
display: block;
}
#header #responsive_welcome a {
display: block;
text-decoration: none;
margin-left: 62px;
}
#header #responsive_welcome .bstyle {
border-radius: 3px;
box-shadow: 0 1px 1px #999;
color: #fff;
font-size: 16px;
padding: 12px 16px;
text-align: center;
width: 150px;
}
#header #responsive_welcome .log {
background-color: #a0171c; /* fallback color */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#cb2027), to(#a0171c));
background: -webkit-linear-gradient(#cb2027, #a0171c);
background: -moz-linear-gradient(#cb2027, #a0171c);
background: -o-linear-gradient(#cb2027, #a0171c);
background: linear-gradient(#cb2027, #a0171c);
border: 1px solid #a0171c;
text-shadow: 0 -1px -1px #761114;
}
#header #responsive_welcome .create {
background-color: #2b4170; /* fallback color */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#2b4170));
background: -webkit-linear-gradient(#3b5998, #2b4170);
background: -moz-linear-gradient(#3b5998, #2b4170);
background: -o-linear-gradient(#3b5998, #2b4170);
background: linear-gradient(#3b5998, #2b4170);
border: 1px solid #2b4170;
text-shadow: 0 -1px -1px #1f2f52;
}
#header #search {
right: 40px;
margin-top: 140px;
}
#header .button-search {
right: -20px;
}
#header #search input {
width: 198px;
}
#header #cart {
margin-top: 194px;
z-index: 9;
right: 38px;
}
.breadcrumb {
margin-bottom: 5px;
}
#login-content {
padding: 0px;
margin: 0px;
}
#login-content .mlog {
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 16px;
margin: 15px 24px 24px 45px;
padding: 12px 16px;
text-align: center;
width: 210px;
font-weight: bold;
}
#login-content .mstyle {
background-color: #2c4762; /* fallback color */
background: -moz-linear-gradient(top, #3a5876, #2c4762);
background: -ms-linear-gradient(top, #3a5876, #2c4762);
background: -webkit-linear-gradient(top, #3a5876, #2c4762);
border: 1px solid #2c4762;
text-shadow: 0 -1px -1px #203448;
}
#login-content #registerleft h2 {
font-size: 14px;
border-bottom: none;
}
#login-content #registerleft {
float: none;
width: 220px;
text-align: center;
padding-left: 30px;
}
#login-content #signinright h2 {
font-size: 14px;
border-bottom: none;
}
#login-content #signinright {
float: none;
width: 220px;
text-align: center;
padding-left: 30px;

}
#login-content #signinright input[type=”text”], input[type=”password”] {
width: 180px;
border-radius: 4px;
height: 24px;
vertical-align: top;
}

}

[Author]

Posts