I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution.
While troubleshooting, I made some interesting observations:
- Testing the HTML+CSS code on jsfiddle (http://jsfiddle.net/STXmQ/) revealed similar display issues on mobile and tablet.
- However, switching jsfiddle to fullscreen mode (http://jsfiddle.net/STXmQ/embedded/result/) resolved the problem not only on desktop but also on mobile and tablet!
Check out the online version of my layout. Any assistance is greatly appreciated!
SOLVED: Following Maximilian Hoffmann's advice, I added min-width: 960px to the header and footer sections, fixing the display issue across various devices.