DEV Community: Aanshik Sharma

The CSS Media Query That Changed How I Approach Responsive Design

Aanshik Sharma — Wed, 17 Jun 2026 17:30:00 +0000

I was working on the responsiveness of my portfolio website when I discovered a CSS media query that changed how I think about responsive design.

I initially thought I needed a way to detect whether the website was being viewed on a mobile device or tablet.

I did that by checking if the height of the document body was greater than its width hoping it would be a reliable solution.

const isVertical= document.body.clientHeight > document.body.clientWidth;

I realized that I was checking the device’s portrait orientation instead of checking for the device type.

While researching the issue, I encountered this CSS media query that checks if the user’s primary input device can conveniently hover over DOM elements.

@media (hover: hover) {
    /* styles for devices that support hover */
}

Tailwind also supports this through arbitrary variants

<Card className="[@media(hover:hover)]:bg-teal-800" />

Devices that match

Desktops with mouse
Laptops with trackpad
Most devices with a mouse pointer

Devices that do not match

Touch-only phones
Touch-only tablets

However, devices with an attached mouse or trackpad may behave differently

For example,

.button{
    opacity: 1;
}

@media (hover: hover) {
    .button{
        opacity: 0;
    }

    .card:hover .button{
        opacity: 1;
    }
}

On mobile devices,

The button is always visible
:hover rules are ignored

On a laptop,

The button starts hidden
Appears when the card is hovered

This can also be used the other way around to explicitly check if the device is unable to hover over DOM elements.

@media (hover: none) {
    /* styles for devices that do not support hover */
}

or in tailwind as [@media(hover:none)]:bg-teal-800

Another useful media feature is @media (pointer: fine), which checks pointer precision of the primary pointing device. A table below describes how both the queries respond with primary input devices.

Device	Hover	Pointer
Mouse	hover	fine
Trackpad	hover	fine
Finger touch	none	coarse
Stylus	usually hover; could be none depending on the device	fine

Pointer characteristics are implementation-dependent and may vary across browsers and operating systems.

Since we have already discussed hover and pointer there are two important properties that I believe must be mentioned.

@media (any-hover: hover) {
    /* styles */
}

@media (any-pointer: fine) {
    /* styles */
}

These differ from

hover
pointer

because they consider all available inputs rather than just the primary one.

For example,

Tablet + mouse attached

might report

hover: none

but

any-hover: hover

This was a small discovery, but it changed the way I approach responsive design. If you're building interactions that depend on hover or pointer precision, these media queries are worth keeping in mind.

How to fix your last commit without creating a new one...

Aanshik Sharma — Wed, 10 Jun 2026 14:30:00 +0000

One habit quietly polluted my Git history for months. Sometimes when we make a commit and realize that a feature has been left uncommitted, we just create a new commit with a commit message close to “Project feature update final final v2”.

There is actually nothing wrong with it except the fact that it really builds up the commit history with utter nonsense commit messages. This, feeds ambiguity and ambiguity kills systems.

However, this can be fixed by a simple command.

git commit --amend

The --amend flag replaces the previous commit with a new version of that commit. To you it looks like the old commit was edited, but Git actually rewrites that part of history.

It can be thought of as replacing the previous commit with a new one; all the changes from the previous commit persist while the new changes also appear in the HEAD node, without clogging up the commit history.

Edit the last commit message
```
git commit --amend
```
Opens your default editor to modify the message.
Or you can do it directly without opening an editor:
```
git commit --amend -m "Commit Message"
```

Change Author or Commit Date

git commit --amend --author="Jane Doe <janedoe@gmail.com>"
git commit --amend --date="2026-06-10T12:00:00"

Amend a commit without changing the commit message

git add forgotten-file.js
git commit --amend --no-edit

If the commit has not been pushed yet, the above commands are usually all you need. But if the commit was pushed, two cases emerge:

You are working alone or on a private branch

In this case, you can just push the amended commit using
```
git push --force-with-lease origin <branch-name>
```
This safely overwrites the remote branch only if no one else has pushed changes since your last fetch.

Always use --force-with-lease instead of --force to prevent accidentally deleting a teammate’s work if they pushed while you were amending.
You are working on a shared branch with your teammates

If the commit has already been pushed to a shared branch, avoid amending it unless everyone collaborating on the branch understands that history is being rewritten. In most team environments, creating a follow-up commit is usually safer than force-pushing rewritten history.

Hello World

Aanshik Sharma — Wed, 10 Jun 2026 13:34:06 +0000

Hi, I'm Aanshik.

I've always found myself chasing questions.

Sometimes those questions are related to software. Sometimes they're about how computers work under the hood. Sometimes they're completely unrelated to anything I need for a project, an exam, or a career.

I simply enjoy understanding things.

Over the years, I've learned a lot of interesting concepts, solved a lot of frustrating problems, and discovered plenty of things that made me stop and think, "I wish I had known this earlier."

The problem is that these lessons tend to disappear. We learn something, use it once, and move on to the next challenge.

This blog is my attempt to change that.

Rather than letting ideas fade away, I want to document them. Some posts may be technical. Others may be observations, experiments, lessons, mistakes, or rabbit holes I happened to fall into while trying to understand something.

I don't know exactly what this blog will become, and that's part of the reason I'm excited to start it.

What I do know is that I'm curious, and curiosity has led me to some interesting places so far.

This blog is simply a record of that journey.

Let's see where it goes.