So I was having a look at my website on my mobile device and there are a few errors I haven't been able to fix. The first is the footer of my site. http://www.webbmaster.com.au/web-programs/questdesign/ As you can see my footer looks distorted. Any ideas on how to fix it for mobile. This is my css code for the footer. .footer { background-color:#F6861F; color:#fff; padding:20px0; text-align: center; overflow: hidden; width:100%;} Code (markup): Also the other problem is the large amount of white space down the bottom of the page. How would I go about removing that? Many thanks to whoever can help me sort this problem out.
I have examined your site and CSS , problem is your major classes are defined using PX instead of % For example .body .container { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); height: 553px; opacity: 30; padding: 50px; width: 960px; } Code (CSS): This code should be rewritten for responsive usages. A responsive code should be written using % of width height or margins, Currently your present code can be fixed by just rewriting css /templates/protostar/css/template.css