Improve the mobile view for Office 365 Sharepoint Online public sites.

?It’s all about width…Microsoft has a come a long way in improving mobile accessibility in 2013 Sharepoint sites by replacing the archaic table layout stucture used up until SPO 2010. In the public site’s settings, under master page, you can pick the device channel master page that works best for you. Your site will then detect the screen size being used and switch over to the selected mobile master page, which in turn will adjust the size and positioning of elements to improve the visual experience.
Unfortunately, they haven’t gone far enough. Most list and library web parts still generate tables that are used for layout and tables can’t easily be resized when viewed on a small screen.
There isn’t much you can do about that, but one thing you can control is if your site content includes fixed widh elements such as tables or Adsense ads or other script generated elements. To fix these requires some simple manual adjustments to your site’s stylesheet to eliminate horizontal scrolling.
The simpler the better
To reduce the amount of adjustments needed, it’s alway a good idea to “think mobile” when you create your pages. Here are some general guidelines:
Don’t use tables in your page content (they can’t be resized easily)
Try to only use 300px or narrower Adsense boxes.
Try to avoid floating elements wherever possible: if you wrap text around an image for example, the text will respect the float and probably end up getting squished into a narrow column.
Keep layouts as simple as possible.
Media queries to the rescue

In a nutshell what css3 media queries do is allow you to specify DIFFERENT CSS RULES FOR DIFFERENT SCREEN WIDTHS. The mobile rule is nested within a special @media rule. If for example you wanted to hide a wide Adsense ad for iPhones, you’d add this to your stylesheet:
@media screen and (min-width:320px;) and (max-width:719px;) {
#myadsensead{display:none;}
}
What that does is say”for screen viewing on screens between 320px and 719px wide, don’t show the element with an id of myadsensead”.

Using media queries you can remove or hide elements, change widths, or pretty much do anything that css rules can do -but targeted at a specified screen width.