HOW TO USE CSS @MEDIA RULE

css @media rule is adjusting specific elements for the screensize of the device, you may knows this as the "mobile" function when adding codes in pro plus. this is very useful for pro standard users or those who make their websites from scratch.

how to use it?

⎗

1
2
3

first make an embed and add the <style> </style> as this is a css code. 
next insert the code below between the style tags.
lastly, insert the element id and the css codes you would like to see on mobile.

@media only screen and (max-width: 600px) { element id { /*insert your codes here*/ } }

FOR BIGGER MONITORS
@media only screen and (min-width: 1400px) { text01 { color: red; } }

FOR IPAD
/*working only in ipad portrait device*/ @media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) { body{ background: red !important; } }

/*working only in ipad landscape device*/ @media all and (width: 1024px) and (height: 768px) and (orientation:landscape){ body{ background: green !important; } }

how to see the output in mobile?
aside from checking your mobile device and adjusting it on desktop, you may use responsinator.com as a guide for you to see your work, (on my end the screen size isn't accurate as i do check on my mobile device for more accuracy but the site is very helpful for you to see your output on mobile!)

go back to mist.drr.ac