I have tried everything and failed. My current WordPress theme is not so mobile friendly, in fact, even at 768x1024 resolution it goes all crazy. I have only adjusted the content width, and sidebar width.
It is perfect at most of the screens, but if I try to view it on other devices, such as iPad, Kindle, it doesn't look right.
Screenfly iPad view: http://quirktools.com/screenfly/#u=http%3A//tryonlineroulette.com/&w=768&h=1024&a=22
Live website demo: http://tryonlineroulette.com
And here is the code that is responsible for mobile or different resolution view:
/***** Media Queries *****/
@media screen and (max-width: 1024px) {
.mh-container { width: 980px; }
#main-content { width: 630px; }
.main-nav { width: 100%; }
.loop-header, .loop-thumb { width: 100%; float: none; margin-right: 0; }
.loop-thumb, .loop-header .entry-meta { margin-top: 20px; }
.entry-title-wrap, .entry-meta-wrap { float: none; width: 100%; }
.entry-title-wrap { margin-bottom: 20px; margin-bottom: 1.25rem; }
.entry-header .entry-meta { float: left; }
.commentlist ul, .commentlist ol { margin: 0 0 30px 0; margin: 0 0 1.875rem 0; }
.commentlist ul ul, .commentlist ol ol { margin: 0; }
}
@media screen and (max-width: 767px) {
.mh-container { max-width: 440px; width: 90%; }
#main-content, #main-sidebar { float: none; width: 100%; margin-right: 0; }
#main-content { margin-bottom: 30px; margin-bottom: 1.875rem; }
[class*='mh-col-'] { float: none; width: 100%; margin: 0; }
.js .slicknav_menu { display: block; }
.js .main-nav { display: none; }
.header-wrap { padding: 0; }
.logo { padding: 40px 0; padding: 2.5rem 0; }
.latest-news-widget .news-item { margin-bottom: 30px !important; margin-bottom: 1.875rem !important; }
}
Any help will be much appreciated!
Thanks