Category: CSS

Articles on CSS tips and tricks

Zoom everything on bigger screens – CSS Media queries

Hi, if you want to zoom your website on a bigger screen like QHD and UHD i.e > 1920px you can just use the following media queries. You can edit them according to your needs. /* Zoom everything on bigger screens */ @media (min-width:2000px) and (max-width:2399px) {...

Error: Incompatible units: ‘vw’ and ‘rem’ in SCSS to CSS compiler

CSS

Are you getting error like the screenshot below? SCSS has a built-in function to ignore things in quotes. width: unquote(” add_your_css_here “); font-size: unquote(“clamp(1.25rem, 0.5rem + 1.45vw, 26px)”); This will be compiled without the...

CSS zebra-striping in sets of three and four

CSS

Here is a simplest way to create zebra styled elements in sets of three using CSS only. DEMO See the Pen CSS zebra-striping in sets of three by Puneet Sharma (@webdevpuneet) on CodePen. Effective CSS .zebraStrip > div:nth-child(6n+1), .zebraStrip >...

Responsive text with respect to container width

CSS, JavaScript

I used fitty to create responsive text that fits inside it’s parent container perfectly. Fitty Scales up (or down) text so it fits perfectly to its parent container. Ideal for flexible and responsive websites. Here is the demo. DEMO See the Pen SVG Icons –...

Responsive Square, Circle with CSS only

CSS

Here is a simple technique to create responsive shapes like a square, circle or rectangle (maintaining it’s aspect ratio) with the help of CSS only. DEMO See the Pen Responsive Square with CSS by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...

How to maintain aspect ration of YouTube videos with CSS

CSS

Hey, you can create responsive YouTube videos with the help of CSS only and maintain its aspect ratio without needing any third-party JavaScript library. The easiest and quickest way to do it is with the following CSS. HTML <div class=”container”>...