Managing Lengthy Content on Mobile

So, you have a website chock-full of content, great content. However, once viewing your site on a mobile phone or tablet you might notice that some of those large tables or grids of content don’t look so hot since there’s just not enough space. Things like large pricing grids or lists with columns are often too wide to fit in the smaller mobile phone or tablet environment, especially if the rest of your site is built to fill up a desktop sized screen.

Use CSS to deliver unique content to your desktop or mobile website users.

One of many solutions for this problem is to deliver different content depending on the environment in which your website is being viewed. This can be done easily using CSS media queries which allow us to simply hide or show content based on the size of the user’s screen.

.hide-on-desktop {
	display:none;
}
.hide-on-mobile {
	display:inherit;
}

@media only screen and (max-width: 800px) {
	.hide-on-desktop {
		display:inherit;
	}
	.hide-on-mobile {
		display:none;
	}
}

In the example above, we have created 2 simple CSS classes which we can use on any block element on the site. When a user visits the page on their phone, anything with the “hide-on-desktop” class will be hidden wheras the elements with “hide-on-mobile” will show up. Below is an example where we have 2 versions of basically the same content, but each can have dramatically different content and/or layouts to fit within the space we can work with.

<div class="pricing-grid hide-on-mobile">
	[ my super-huge table or grid ]
</div>

<div class="pricing-grid hide-on-desktop">
	[ mobile optimized content ]
</div>

This solution of hiding or showing content in each environment let’s us ensure that our users see what we want them to see and ensures that we’ve taken the time to design something specific for the end-user’s viewing environment. How we design that alternate content for mobile devices will depend on exactly what that content might be, however with this handy CSS trick we can make sure that it looks and works great in either mobile phone, tablet or desktop environments.

Nothing is more important than making your content look and work great everywhere.