Amitav Roy

Blog on web and travel

CSS hack/fix for Google chrome and Safari

Posted on July 2019

This time it is a small one about how to fix a CSS issue. I was working on the theme of my website when I came across this strange problem. One of my div container with an image had some negative margin. This was working wonders on Firefox and Opera, but somehow Google chrome was not in a mood to co-operate. I could have used some server-side code to check the browser and things like that, but then, it would have been an overkill for a small problem which can take care with CSS hack.

By the way, I have not even mentioned about Internet Explorer because personally, I don’t support it. If it is working, then well and good ? (a way to say no to IE).

So, after some googling and stuff finally, I got it. So, check this out:

#camera-position-home img {
    margin-top: -34px;
    margin-bottom: -4px;
    margin-left: 150px;

The code was working fine with Firefox, but not in Chrome. And I found this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #camera-position-home img {
   margin-top: -43px; /* This works only in Safari and Google Chrome */

This works like wonder. And if you wanna know what is that strange thing going on at the top, then check this link