I’ve posted media queries to help designers & developers for their responsive designes.
Many times We’ve had to design responsive websites targeting specific devices with CSS media queries.
[code]iPad in portrait & landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Your Styles */ }iPad in landscape@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : landscape) {
/* Your Styles */
}
iPad in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : portrait) {
/* Your Styles */
}
iPhone 5 in portrait & landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* Your Styles */
}
iPhone 5 in landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
and (orientation : landscape) {
/* Your Styles */
}
iPhone 5 in portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
and (orientation : portrait) {
/* Your Styles */
}
[/code]
Also dont forget to add this meta tag at head
[code]<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>[/code]
“Also dont forget to add this meta tag at head”–What meta tag? Do you mean:
?
Oops, I made the same mistake: not knowing how to post a line of code in wordpress…
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
Thanks! a lot, I have now corrected it, you also can use [code][code]your php or html code here[ /code][/code]
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
I was curious if you ever considered changing the structure of your website?
Its very well written; I love what youve got to say. But maybe you could a little more in
the way of content so people could connect with it better.
Youve got an awful lot of text for only having one
or two images. Maybe you could space it out better?
Hi Cindi,
Thanks for suggestions, I will work out on this.
I hope visitors will get easily connect with this website more better way.
Thanks
Vivacity Team
Thanks! Cindi for your valuable suggestions.
We will work on it.
Regards
Vivacity Team