Here is a helpful Web Development tip I picked up while debugging a site for mobile reactivity.
Ever have a website that looks fine on a mobile device, but as soon as you scroll to the side you see unwanted dead space? This is usually caused by elements marked up for 100% width getting even MORE pixels added to it from too much relative positioning. Make sure your relative positioning makes sense. However the one thing that helped me out most in tracking down mobile layout bugs, was adding a visible border to all elements! Yes, there is a selector in jQuery for all elements, ‘*’. Check it out:
So now we can visually see how much space each element takes up. Your layout will most likely get “bumped” a bit (three columns become two etc.), but it will definitely expose where you are going wrong in the layout. Try it out next time!
Leave A Comment