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
5dc4d8a109cac4dff0146096b27f65e2
1s0we8kipar3l5db