Responsive Site Not Showing Horizontal Lines Correctly Due To Scaling Issue

I am adding responsive feature to a website using css, this website has been their for sometime and now responsive feature is being added to it so that it can support mobile versio

Solution 1:

This isn't really an issue you can solve. Your code is fine.

Below you'll see an image of a few screenshots I took. I ran the Fiddle through Android 2.3.3 and 4.4 on virtual machines, then played with the scaling. The top two pictures are 2.3.3 and 4.4, scaled to 100% resolution. 1 pixel on my screen is 1 pixel on the 'phone'. You can see that the lines are fine (I think the 4.4 screenshot might not have been exactly 1:1, but its clear in the 2.3.3 screenshot)

But below, you will see where I have taken the same device but scaled the phone down, so it was no longer 1:1. You can see the issue you are describing appearing in these screenshots, meaning that the way your phone screen and the scaling is the issue here.

Edit: You might need to load the image URL in a new window to see the real thing. I'm not sure how to link a picture on here sorry!