I would like a box to have a max width of 960 on desktop, but a max width of 700 on an iPad held vertically. Looking at tablet-and-desktop.scss, I noticed that styles for this device were couched in this:
@media only screen and (min-width: 768px) {
//styles
}
I tried this on my theme:
.box {
max-width:960px;
}
@media only screen and (min-width: 768px) {
.box {
max-width:700px;
}
}
But this doesn't work - it becomes max-width 700 on both the iPad AND the desktop, which is not what I want.
What am I missing?
Official response from Jesse Haff
If you search for "tablet only" (around line 483) in table-and-desktop.scss, you will find a media query which only targets tablets. Place your CSS within it and it should work fine.
Share this post
Showing 3 reactions
Sign in with
Tim Wayne
Certified Architect
Certified Expert
Tim Wayne
Certified Architect
Certified Expert
Styles I add to mobile-nav DO NOT appear when viewing the site on an iPad. :-(