How to Make Table Responsive

[markkeefe]

Hi all,

I am very new and have been working on an online store using the volusion platform. I apologize if I am posting this in the wrong area!

 

I switched it to one of their responsive templates and everything seems to be working except for a table of products on my homepage. Even that seems to be responsive to a degree (when you shrink a PC browser window somewhat)v but when viewed on an iPhone does not work at all.

Website URL is mrbanner.com

 

I have attached the section of code where I believe the table of products begin. I have copied the first product code and then it repeats similarly through 12 products...

 

I tried to add the class="img-responsive" based on a suggestion from somebody but that didn't do it. Any ideas please? Thank you!

[Ingolme]

In order to make your pages responsive, you need to get rid of all width declarations that specify a width in pixels, ems or other fixed units. Setting the width in percentages helps make it responsive.

 

I didn't see any <table> elements in the code you showed, but tables are rigid and not able to be responsive. If it's important for your page to be responsive you need to use other elements that are not tables and that do not use "display: table".

 

img-responsive will make an image responsive (assuming you have bootstrap CSS included), but only if it's contained by an element that is also responsive.

 

Most importantly, you must make sure your HTML is valid. Here are the validation results of your website: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mrbanner.com%2FDefault.asp

[markkeefe]

Ingolme, thank you for taking a look at the site and for the feedback. What you said makes sense for the responsive elements and I see there are a lot of other things that need to be addressed which are way beyond me so I will get some help.

 

Thanks again...

[dauruk0512]

yes what foxy said you need to make sure html so here is give simple logic from me, i did in my project make me stress full with responsive issue

<!-- http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries--><!--Large desktops and laptops--><link rel='stylesheet' media='screen and (min-width: 1200px) ' href='<?php echo base_url() ?>asset/css/largedesktop.css' /><!-- Landscape tablets and medium desktops--><link rel='stylesheet' media='screen and (min-width: 992px) and (max-width: 1199px) ' href='<?php echo base_url() ?>asset/css/landscapetablet.css' /><!-- Portrait tablets and small desktops--><link rel='stylesheet' media='screen and (min-width: 768px) and (max-width: 991px)' href='<?php echo base_url() ?>asset/css/portraittablet.css' /><!--Landscape phones and portrait tablets --><link rel='stylesheet' media='screen and (max-width: 767px) ' href='<?php echo base_url() ?>asset/css/landscapephone.css' /><!-- Portrait phones and smaller --><link rel='stylesheet' media='screen and (max-width: 480px) ' href='<?php echo base_url() ?>asset/css/portraitphone.css' /><!-- default --><link rel='stylesheet'  href='<?php echo base_url() ?>asset/css/default.css' />

as new bie need to make every screen css divide some !

 

i hope this make sense, good luck

[Ingolme]

I would recommend having all the CSS in one file. Having so many files really slows down the page loading. Media queries in CSS re done with the @media rule, you can see more in the W3Schools.com CSS reference.