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
1d8644bdbae1e9b19716c36e3c90b0f2
bjp7yfru2i1dq0kv