I'm trying to optimise my website for mobiles and small screens. The website looks perfect on anything 1920x1080 and above, but on a mobile, things get really crazy. I'm using bootstrap and I can't figure out what's wrong with my code that is preventing the mobile scaling from working.
The problem that I am having is this: It seems my background 's arent scaling to the text - that is, these 's appear to be completely static and the text can just overflow past them and stack onto other parts of the page. What I want to happen is for the background colour, (white, grey, dark grey) to extend to the regions of the text on the mobile view, essentially pushing everything below it further down, allowing for a continuous scrolling page with no overlapping content.
The text-overflow: none only blocks the text and doesnt extend the region.
How can I make this look good on mobile!? I've been smashing my head against a wall all day and I'm getting incredibly frustrated. I could really do with a good explanation as to the mistakes i've made and how to correct them to achieve my desired effect.
Thank you in advance.