Position content to center when it overflows

Normally, when content or an image overflows outside a div, the overflowing content is shown on the right outside the “box”. If you want to position the content to the center, so that overflow is on both sides, you can use this class. This is useful to position an image to the center on overflow.

1
2
3
4
5
6
7
/* Class to be added to the content or image inside the container-div */
.overflow-center {
    position: relative;
    left: 50%; /* move the image to right by 50% of container size */
    transform: translateX(-50%); /* pull back by 50% of the image or content size */
    width: auto;
}

Make an inner div full-width of the page

When a div is inside another div, adding width: 100% will only stretch it to the width of the container. To make the stretch to the full widht of the page (or viewport), use this

1
2
3
4
5
.stretch-full-width {
    width:  100vw;
    max-width:  100vw;
    margin-left:  calc(50% - 50vw); /* setting left margin as 50% of parent div's margin moves this div to the middle of the page. Then pull it back by a width that is half of the entire page's width. */
}

Align second-line of bullets

HTML aligns the lines after the first line flush with the bullet point (the dot) instead of the text. Fix this with the class below. text-indent property applies only to the first line of a text-block. With this class, we pull the first-line back along with the dot. Then we’re pushing the entire text-block including the dot with a margin-left.

1
2
3
4
5
.fix-bullet-align {
    list-style-position: inside;
    text-indent: -1em;
    margin-left: 1em;
}

Z-index positioning

Simple classes to position content on the z-index. Follows class-names used in design software like Photoshop, Figma, etc.

1
2
3
4
5
6
.send-backward {
    z-index: -10;
}
.bring-forward {
    z-index: 10;
}