Melody Scott

asked on 3/26/2015

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.

CSSWeb DevelopmentHTMLBootstrap

Last Comment

Melody Scott

8/22/2022 - Mon

SSupreme

3/26/2015

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

Melody Scott

3/26/2015

ASKER

Thanks, I'll certainly give that a try!

Melody Scott

3/26/2015

ASKER

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.

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

lenamtl

3/26/2015

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

Melody Scott

3/26/2015

ASKER

Thanks, I'll look into that as well!

Melody Scott

3/26/2015

ASKER

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.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

lenamtl

3/26/2015

Suggestion you can hide icon columns to save the space.

you may like this one Tablesaw
https://github.com/filamentgroup/tablesaw

SSupreme

3/26/2015

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

Melody Scott

3/26/2015

ASKER

wow, thanks for that! Lots of work from you, I appreciate it.

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

Melody Scott

3/26/2015

ASKER

Hmm.. it looks good on desktop, but in mobile emulators it just gets smaller, doesn't stack. See here:

dev2.magickitchen.com/gifts2.html

ASKER CERTIFIED SOLUTION

SSupreme

3/26/2015

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Melody Scott

3/26/2015

ASKER

Sorry I missed that! Brilliant, thanks very much.

Melody Scott

3/26/2015

ASKER

Whoops, one small problem, the next paragraph appears to be partly in the div.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

SSupreme

3/26/2015

.giftscontainer {
display: block; overflow: hidden;
}
it makes div appear as square box for full height.

Melody Scott

3/27/2015

ASKER

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.

SSupreme

3/27/2015

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.

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Melody Scott

3/27/2015

ASKER

Thanks, You're very patient with me! Will try this now and recheck the validation.

Melody Scott

3/27/2015

ASKER

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.

SSupreme

3/27/2015

Don't use  in your CSS files, it breaks rules, in our case:
.giftscontainer {
display: block; overflow: hidden;
}
use

 /* Text here */

Open in new window

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Melody Scott

3/27/2015

ASKER

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.

SSupreme

3/28/2015

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:

Melody Scott

3/30/2015

ASKER

Thanks so much. I learn new things every day.

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!

Walt Forbes

Melody Scott

3/30/2015

ASKER

I still do have the same problem though. dev2.magickitchen.com/gifts2.html

SSupreme

3/30/2015

/*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.

Melody Scott

3/30/2015

ASKER

Beautiful! Thanks so much, this will work very well for several places on the website. Thanks for your patience!

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.