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)

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 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:

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.

Updated on: 01/08/2025