Bootstrap 3 one table for lg and md, a different table for sm

I have a table here:  dev2.magickitchen.com/gifts.html (it's on my list to clean up the css). I'd like to keep this table for lg and md screen sizes, but it would be convenient if I could have a different table for sm screen sizes. I would lay it out differently, taller and skinnier.

Is that simple enough to do with bootstrap? Could you lend me a hand? Thanks.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SSupremeCommented:
I don't think you need table here. You need cells, which stack by 3 when large screen, by 2 when medium and by 1 one when small and much skinnier. You don't need bootstrap for it but simple CSS like this.
@media screen and (max-width: 980px) { 
	.box {  float:left; width: 33%; }
}
@media screen and (max-width: 650px) {
	.box {  float:left; width: 50%; }
}
@media screen and (max-width: 480px) {
	.box {  float:left; width: 100%; }
}

Open in new window

0
mel200Author Commented:
Thanks, I'll certainly give that a try!
0
mel200Author Commented:
Wait.. I'm not certain how the html should look.

<div class="box:>item1</div><div class="box:>item2</div><div class="box:>item3</div>

Like that? Thanks.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lenamtlCommented:
I recommend you to use Footable this is a fantastic script for table.
http://themergency.com/footable/
I'm using it with Bootstrap for all my project
0
mel200Author Commented:
Thanks, I'll look into that as well!
0
mel200Author Commented:
Oh, no, I've looked into that and it won't work for this simple table I'm working on. I can't hide columns. Thanks, though.
0
lenamtlCommented:
Suggestion you can hide icon columns to save the space.

you may like this one Tablesaw
https://github.com/filamentgroup/tablesaw
0
SSupremeCommented:
Almost complete, combine with first comment
instead of box I used giftitem
Replace whole table with:
<div style="giftscontainer">	
<div style="" class="giftitem"><img src="images/gift-page/gift-card.jpg" alt="gift certificate">
<a href="/gift_certificates.html">Gift Certificates</a></div>
<div class="giftitem"><img src="images/gift-page/mom.jpg" alt="mother's day">
<a href="mothers-day.html">Mother's Day</a></div>
<div class="giftitem"><img src="images/gift-page/fathers-day.gif" alt="father's day food gift">
<a href="fathers-day.html">Father's Day</a></div>
<div class="giftitem"><img src="images/gift-page/anniversary.jpg" alt="roses">
<a href="/menu/anniversary.html">Anniversary</a></div>
<div class="giftitem"><img src="images/gift-page/baby-shower.gif" alt="baby shower gift">
<a href="/menu/baby-shower.html">Baby Shower</a></div>
<div class="giftitem"><img src="images/gift-page/birthday.jpg" alt="birthday gift">
<a href="/menu/birthday.html">Birthday</a></div>
<div class="giftitem"><img src="images/gift-page/college2.jpg" alt="college diploma">
<a href="/menu/back-to-school.html">Off to College</a></div>
<div class="giftitem"><img src="images/gift-page/congratulations.jpg" alt="congratulations gift">
<a href="/menu/congratulations.html">Congratulations</a></div>
<div class="giftitem"><img src="images/gift-page/corporate2.png" alt="corporate">
<a href="/menu/corporate.html">Corporate</a></div>
<div class="giftitem"><img src="images/gift-page/new-house-key.jpg" alt="housewarming gift">
<a href="/menu/house-warming-gifts.html" style="font-weight:bold; vertical-align:middle;">New Home</a></div>
<div class="giftitem"><img src="images/gift-page/get-well4.png" alt="doctor">
<a href="/menu/get-well.html">Get Well Gifts</a></div>
<div class="giftitem"><img src="images/gift-page/retirement.gif" alt="retirement">
<a href="/menu/retirement.html">Retirement Gift</a></div>
<div class="giftitem"><img src="images/gift-page/baby1.png" alt="baby">
<a href="/menu/new-parents.html">New Parents</a></div>
<div class="giftitem"><img src="images/gift-page/seniors2.jpg" alt="seniors">
<a href="/menu/seniors-gifts.html">Seniors</a></div>
<div class="giftitem"><img src="images/gift-page/sympathy.png" alt="mothers day">
<a href="/menu/sympathy-gifts.html">Sympathy Gifts</a></div>
<div class="giftitem"><img src="images/gift-page/8.gif" alt="gifts $75 and under">
<a href="/menu/75.html">$80 and under</a></div>
<div class="giftitem"><img src="images/gift-page/1.gif" alt="gift">
<a href="/menu/200.html">$200 and under</a></div>
<div class="giftitem"><img src="images/gift-page/4.gif" alt="student gift">
<a href="/menu/125.html">$125 and under</a></div>
<div class="giftitem"><img src="images/gift-page/7.gif" alt="gift box">
<a href="/menu/201.html">$200 and over</a></div>
<div class="giftitem"><img src="images/gift-page/gift-card.jpg" alt="gift certificate">
<a href="/gift_certificates.html">Gift Certificates</a></div>
</div>

Open in new window

.giftscontainer {
display: block; overflow: hidden;
}

.box, .giftitem {
    width: 33%;
    float: left;
    border: 1px solid gray;
    height: 55px;
    display: inline-block;
    padding: 5px;
}

Open in new window

0
mel200Author Commented:
wow, thanks for that! Lots of work from you, I appreciate it.
0
mel200Author Commented:
Hmm.. it looks good on desktop, but in mobile emulators it just gets smaller, doesn't stack. See here:

dev2.magickitchen.com/gifts2.html
0
SSupremeCommented:
Almost complete, combine with first comment
@media screen and (max-width: 980px) { 
	.giftitem {  width: 33%; }
}
@media screen and (max-width: 650px) {
	.giftitem { width: 50%; }
}
@media screen and (max-width: 480px) {
	.giftitem {  width: 100%; }
}

Open in new window

Last link not found on your server.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
Sorry I missed that! Brilliant, thanks very much.
0
mel200Author Commented:
Whoops, one small problem, the next paragraph appears to be partly in the div.

screenshot
0
SSupremeCommented:
.giftscontainer {
display: block; overflow: hidden;
}
it makes div appear as square box for full height.
0
mel200Author Commented:
Right, I already have that, please see here: dev2.magickitchen.com/gifts2.html. Also, the new box unbalances the page in that it movs the right navigation down out of the page. Maybe this won't work for this page, but it's very good stuff.
0
SSupremeCommented:
No, you don't have. <div style="giftscontainer">      should be <div class="giftscontainer"> (my mistake)

Also, the new box unbalances the page in that it movs the right navigation down out of the page.
Nothing,  to do with that, you have "row" div and last column is outside of "row", need to check markup on extra or less divs.

It works fine for any type of page.
0
mel200Author Commented:
Thanks, You're very patient with me! Will try this now and recheck the validation.
0
mel200Author Commented:
Ok, I have <div class="giftscontainer"> , but I still see what my earlier image shows. Page is validated now, and other problem is gone, as you said. Thanks.
0
SSupremeCommented:
Don't use <!--table in css --> in your CSS files, it breaks rules, in our case:
.giftscontainer {
display: block; overflow: hidden;
}
use
 /* Text here */

Open in new window

0
mel200Author Commented:
I'm afraid I don't understand. I can remove all css referencing tables, is that what I need to do? Thanks. By the way, I will be away from now until Monday, so won't make any more changes until then.
0
SSupremeCommented:
In your CSS file you have comments in this brackets <!--  -->, they used in HTML not CSS. So, please remove such brackets from you style.css file.
Remove:
<!--table swap--->
<!--table in css -->
0
mel200Author Commented:
Thanks so much. I learn new things every day.
0
mel200Author Commented:
I still do have the same problem though.  dev2.magickitchen.com/gifts2.html
0
SSupremeCommented:
/*table in css*/
@media screen and (min-width: 1201px) { 
	.giftitem {  width: 33%; }
}
@media screen and (max-width: 1200px) { 
	.giftitem {  width: 50%; }
}
@media screen and (max-width: 650px) {
	.giftitem { width: 50%; }
}
@media screen and (max-width: 480px) {
	.giftitem {  width: 100%; }
}

Open in new window


With above code all looks good for me.
0
mel200Author Commented:
Beautiful! Thanks so much, this will work very well for several places on the website. Thanks for your patience!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.