What I want to do is make the div of the opt-in box at the top on the posts and pages stretch across. I wanted to do it using the width:100% attribute in CSS, but it was only stretching across partway.
So I manually set the width to the # of pixels that would make it 100%. But the problem with that is that it is causing display issues on iPhone/iPad.
Is there a way to have the width of a div change on iPhone/iPad to fit to scale? How could I do this?
Thank you!
Liz
code---
.page-opt {
margin-left:-314px;
width:1583px;
clear: both;
margin-bottom:-20px;
padding-bottom:-20px;
position: relative;
}
/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
margin:0;
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
margin:0;
}
/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
margin:0;
}
/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
margin:0;
}
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
margin:0;
}
/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
margin:0;
}
Check out the section regarding viewport:
You can make use of "device-width".