Hi everyone,
I’ve been googling and I can’t find the answer to this. I’ve managed to make parts of my FCC Portfolio responsive and I’m relatively satisfied with the way it looks. However, on my computer screen everything looks fine but for some reason when I check my Codepen dashboard on my mobile phone and/or click on the 1x and 0.5x buttons there’s a border on top of my “.header-img” and I can’t get rid of it. I don’t have any code telling the browser to do that. I don’t understand why that border is there (and would like to understand) and I don’t know how to remove it. Any help would be greatly appreciated. Thank you 
I’m not sure that I see the same thing. What browser are you on? Can you take a screenshot of the problem?
Here’s what I see:
Thanks for the reply! Here’s how it looks like on my mobile phone. I’m using Chrome on a Xiaomi Note 4. As you can see there’s a border line under the navigation section.
Youch, that will be difficult to debug. My condolences to you. I can’t replicate it on desktop Chrome or in iOS, and unfortunately I don’t have an Android device to test on. I applaud your desire to make it perfect, but no one would blame you for shrugging this off and moving to the next project. Still, if you want to track down this bug, you’ll have to do some remote debugging with Chrome. This link should get you started. It’s not too difficult to do and you may actually find the problem right away, plus it’s a good thing to know. It looks like there’s possibly a top or bottom margin that’s popping up.