On 31/03/2014 23:19, Miguel De Anda wrote:
Here's a quick fix for mobile -- only tested on home page but it should work throughout if the layout doesn't change much:add this to the end of slint.css: @media (max-width: 640px) { #layout-menu-box { position: inherit; left: inherit; top: inherit; width: inherit; height: inherit; z-index: inherit; } #layout-content-box { margin-left: inherit; } #layout-menu div { display: inline; } #layout-menu div a { display: inline-block; padding: 0 10px 0 0; } #layout-menu #page-source { border: none; } } then add this meta tag to the head of each .html file: <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> it ends up looking like this: http://home.thedeanda.com/slint.fr/ (link will only be available for a few days) to test, check on your mobile (only tested android) or make your browser window a bit narrower, it collapses the left column up to the header and makes it so you don't have to zoom on your phone. have a lot of fun!
Thanks Miguel! I also tried: @media handheld because it's valid CSS 2.1, but no luck on an Android phone, so I adopted your solution and rebuilt the website accordingly. I'll have ask one of my sons to check on his Iphone to be sure, but so far, so good. I assume that all modern browsers are CSS 3 aware. Thanks again, Didier _______________________________________________ SlackBuilds-users mailing list [email protected] http://lists.slackbuilds.org/mailman/listinfo/slackbuilds-users Archives - http://lists.slackbuilds.org/pipermail/slackbuilds-users/ FAQ - http://slackbuilds.org/faq/
