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.27
ac940f5f3aad0c6a336e2b64866d1f22
y1qboj2zi0v3s4lt