> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.janitorai.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Code Collection: Misc

###### Media Query
Media query is used for device responsiveness (so your page is both mobile and PC friendly). It uses the `@media` rule to include a block of CSS properties. Here's an example for tablet-sized or smaller devices:
```
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
You can set the size this rule is supposed to be for through the `max-width` property. Likewise, you can instead put the `min-width` property, or have both (done like this: `@media only screen and (max-width: ) and (min-width: )`.
Here's a table of sizes (reference: [Email on Acid](https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/))
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_1e13owc.png =415xauto)
You'll notice that the term **breakpoints** have been introduced. To quote something I found on the internet: `These are values that determine how a website looks on different screen sizes`.
Now curious on how to actually use this? Let's use **page dolls as an example.** Let's say you want your page doll to appear smaller on mobile:
```
/* standard size page doll, for desktop */
.page-doll {
width: 300px;
height: auto;}
/* smaller for mobile */
@media only screen and (max-width: 600px) {
.page-doll {
width: 100px;
height: auto;}
}
```
(A full on guide on how to make page dolls is in [this section](https://janitorai.crisp.help/en/article/code-collection-profile-page-1mxhz6l/) of the guide.)

With that said, you can also have **multiple different elements** put under the same rule (`@media query`). Like so:
```
@media only screen and (max-width: 600px) {
/* page doll */
.page-doll {
width: 100px;
height: auto;}
/* profile card */
.insertclassID {
<insertproperties>: ;}
}
```


###### ::before and ::after
`::before` and `::after` are pseudo-elements used to insert content before and after the element that belongs to the class ID it is used on. In code, you may see them like this:
```
.css-1234::before {
insert css
}
```
`::before` adds content before the element, whereas `::after` adds content after the element.

This can be used to add more form or style to pre-existing elements on a site. One of it's most known uses are for text. We typically use it to customize existing text on our profile pages, like our follower counts. An example:
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_qmo6nc.png)
The text 'To my 3641 followers, thank you!' initially used to just say '3641 followers'. I achieved this by using both pseudo-elements. Here's the code I used:
```
.css-1ciz3n::before {
content: "To my ";
}
.css-1ciz3n::after {
content: ", thank you!";
}
```
These pseudo-elements can be used to add other content like images.




| Previous Article | Next Article |
| ---- |
| [Return to Code Collection](https://janitorai.crisp.help/en/article/a-guide-to-css-code-collection-1ez72vq/) | [Guide to CSS: Other Resources](https://janitorai.crisp.help/en/article/a-guide-to-css-other-resources-1gbgios/) |