Documentation
content/system/media
Use the media item to create media queries which amend classes as the physical webpage size changes.
@media only screen and (min-width: 1200px) {
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 480px) {
}
See Also
[classes]Examples
Example#1 Create 2 classes. One is only visible when the page width is 1200px or more and the other only when less than 1200px.
@media only screen and (min-width: 1200px) {
[][] .Full {
[][][][] display:block;
[][] }
[][] .Mobile {
[][][][] display:none;
[][] }
}
@media only screen and (max-width: 1200px) {
[][] .Full {
[][][][] display:none;
[][] }
[][] .Mobile {
[][][][] display:block;
[][] }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 480px) {
}
Using the previous media queries, hide the BoxMenu when viewed on a desktop (>1200px)
[div,class=Mobile]
[boxmenu]
…
[boxmenuend]
[divend]
Notes
This website uses cookies. If you remain on this site without changing the cookies settings of your browser, you agree to our cookies being used.
Accept
More Information
Loading…
Version 5.24.95.16268.C3.26
f06f2469e1312b7459ce0b1b1161a4ab
zan15f74sulke6ow