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.25.95.16368.C3.28
38fa3681b63b894a0bb8faf26e780db6
tnuj16py9kbe0f2o