Hi, I've got a site http://www.androidmaniac.net and a custom theme. All's runnin' good but I recently found that on the mobile it shows me a loop of the footer or something, can't figure out why. The index/homepage isn't full screen, but in the post it's just the way it should be. Check with chrome option(inspect) What can I do to show a nice full page for mobile versions ? Thanks. P.S Please give me some advices for mobile optimization.
Well I'm sorry but this website is not responsive to mobile devices at all. You should make CSS rules for screens smaller than 1000px. so width to fit the with of the device. Like: @mediaonly screen and (max-width: 767px) Test with viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
There's so much wrong with that template... where to even begin. It's NOT responsive so it's utterly banjaxed in every mobile device I'm familiar with. It's a fixed width layout so it's a giant middle finger to users of larger displays, AND smaller displays. You've got fixed px height containers on the articles with dynamic (%/em) fonts so that's broken trash for the people %/EM are even for, the endless pointless H1 are semantic gibberish resulting in broken non-visual navigation... it's a laundry list of how not to build a website before I even look at the code! ... where it's the typical train-wreck of tranny document, outdated/outmoded markup techniques, the endless pointless idiotic classes that are the hallmark of turdpress, mated to endless pointless JS for nothing thanks to jQuery, multiple instances of the same ID, broken column methodology, static style in the markup, static scripting in the markup, li without ol/ul, misplaced tags, multiple instances fo the same elements that should not be replicated... hence the ridiculous 12k of markup to deliver 1.6k of plaintext and no content images -- possibly as much as three times the code that should have been used. It's woefully ignorant of what HTML is, what CSS is, or how to use either properly. Seriously, there's little legitimate reason given what's actually showing here for content (after all those scripts fail or are blocked) for the HTML of that page to be much more than: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"> <meta name="description" content="All the news from the Android world."/> <link rel="shortcut icon" href="/favicon.ico"> <link rel="stylesheet" href="/template/screen.css" media="screen,projection,tv"> <title>Android Maniac - All about Android |</title> </head><body> <div id="top"> <h1> <a href="/"> Android Maniac <span><!-- image sandbag --></span> </a> </h1> <form id="search" action="/" method="get"> <fieldset> <label for="searchText">Search:</label> <input type="text" name="s" id="searchText"> <input type="image" src="images/search.png" alt="Go"> </fieldset> </form> <div class="contentWrapper"><div id="content"> <div class="subsection"> <h2> <a href="/latest-and-user-friendly-apps-for-android-phones/"> Latest And User-Friendly Apps For Android Phones </a> </h1> <p> Smartphones are taking the mobile world by storm. Many mobile manufacturing companies are designing the smartphones that are compatible with android operating system. Usually, many Android users, especially those users... </p> <a href="/latest-and-user-friendly-apps-for-android-phones/#more-89" class="readMore" >Read More</a> <!-- .subSection --></div> <div class="subSection"> <h2> <a href="/amazing-features-power-packed-android-marshmallow/"> Amazing Features That Are Power-Packed In Android Marshmallow </a> </h2> <p> Every smart phone user will be alert to know the latest Android app and the latest android version that has been swapped into the market. However, the latest android version is android marshmallow 6.0. This is grabbing... </p> <a href="/amazing-features-power-packed-android-marshmallow/#more-82" class="readMore" >Read More</a> <!-- .subSection --></div> <div class="subSection"> <h2> <a href="/perfect-accessing-features-android-iphone/"> Perfect Accessing Features With Android Over Iphone </a> </h2> <p> More customers turn towards smartphones because of the exceptional features available for them in a perfect manner. However, most of the mobile phone users face the strange dilemma of making use of the best available smartphone. </p> <a href="/perfect-accessing-features-android-iphone/#more-68" class="readMore" >Read More</a> <!-- .subSection --></div> <div class="subSection"> <h2> <a href="/samsung-galaxy-s7-edge-vs-lg-g5-will-smartphone-year/"> Samsung Galaxy S7 Edge vs. LG G5: Which will be the Smartphone of the Year? </a> </h2> <p> 2016 is promising to be a great year for smartphone enthusiasts. Samsung just recently revealed the highly-anticipated Galaxy S7 Edge. It’s set to be released on March 11 with pre-orders before March 5 promised to ... <a href="/samsung-galaxy-s7-edge-vs-lg-g5-will-smartphone-year/#more-15" class="readMore" >Read More</a> <!-- .subSection --></div> <div class="subSection"> <h2> <a href="/samsung-galaxy-s7-is-it-worth-upgrading/"> Samsung Galaxy S7 – Is it worth upgrading </a> </h2> <p> There’s no doubt that the Samsung Galaxy S7 was one of the most expected smartphones of the year and every tech fan out there was looking forward to get their hands on it. And we can totally relate, since it’s the perfect ... </p> <a href="/samsung-galaxy-s7-is-it-worth-upgrading/#more-7" class="readMore" >Read More</a> <!-- .subSection --></div> <!-- #content, .contentWrapper --></div> <div id="extras"> <div id="categories" class="subSection"> <h2>Categories</h2> <ul> <li><a href="/category/android-apps">Android Apps</a></li> <li><a href="/category/android-in-general">Android in general</a></li> <li><a href="/category/android-os">Android OS</a></li> <li><a href="/category/android-phones">Android Phones</a></li> </ul> <!-- #categories.subSection --></div> <!-- #extras --></div> <div id="footer"> <hr> © <a href="/">androidmaniac.net</a>, All Rights Reserved. Design by <a href="/">Maniac Studios</a>. <!-- #footer --></div> <!-- #top --></div> </body></html> Code (markup): Apart from the idiocy that is turdpress, jQuery, and a general ignorance of how to use HTML properly and what does/does not work on a page. I would suggest throwing that entire mess in the bin and starting over, there's nothing to even try and salvage from that. Sorry if that sounds a bit harsh, but reality often is. Oh, and @Blizzardofozz, for **** SAKE don't tell people to set maximum scale or user-scaleable! You're just BREAKING THE ABILITY TO ZOOM ON NON-DESKTOP PLATFORMS!!! WHY the **** DO PEOPLE DO THIS?!?!?!?