Make Columns Scale Down/Degrade for Smaller Screens or Mobile Devices

[pittles78]

Hello,

My page in question is http://superluxefibers.com/pricing-test/ I have 3 columns that stack on top of each other when the screen isn’t wide enough.

On this website http://www.volusion.com/hosting-plans-pricing/ they have columns that will scale to fix mobile devices, but I can’t figure out how to manage that.

Any help would be appreciated.

Cheers,
Jon

[Senff]

That page you linked on Volusion is not responsive at all. On my iPhone it just zooms out on that page (but I have to zoom in to be able to read it anyways).

[eamai]

Yeah, I tested it too. Volusion is not responsive.

[pittles78]

Ok, noted. Can you point me in a good direction to make my columns responsive? Any help is greatly appreciated.

[eamai]

I think your site is good enough. Maybe you can add border or box shadow for each pricing table to distinguish it. You can’t make it side by side or you text will narrow down.

[Martin Duran]

I partly agree with eamai, the format it’s in now is fine, but, to enhance user friendliness, I would do a collapsable panel for mobile view. That way they don’t have to scroll so much. I’d say the headers, services, basic, and deluxe, would be the tabs. Just a thought.

[pittles78]

Hello All,

@Martin I like your idea to change the categories to Services, Basic, and Deluxe. The Collapsable panel sounds cool, but over my head.

Don’t you all see that when the columns stack it doesn’t make sense to the end user. You know have a service that corresponds to the check mark.

I have got to come up with a way to have this make sense. Any ideas?

[Author]

Posts