r58 — 2013-08-14T02:47:25-04:00 — #1
i have a wordpress site on my local host and on the web. right now i'm making changes to the local host to make sure they work before i put them on the web. i'm using a responsive theme and woo commerce plugin. i have found out that the product, cart and check out page use tables to hold the content of the product. once i resize my screen everything responds but the tables. can i make tables responsive and if so how? what little bit of looking i have done shows the table width to be 100%. any help would be nice.
mittineague — 2013-08-14T04:45:11-04:00 — #2
Hi R58, welcome to the forums.
The 100% is in relation to whatever "container" it's inside of (most likely a div)
If you want it to get wider, you could try making the container also 100% - YMMV
If you want it to get more narrow, it might be the cell contents are "pushing". Or maybe the container has a fixed width?
Seeing a bit of the markup and CSS might help some.
ralphm — 2013-08-14T04:48:08-04:00 — #3
Hi R58. Welcome to the forums.
As mentioned, we could help a lot more if we had some demo code to look at. Please check out this thread for tips/template for post useful code samples: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics
r58 — 2013-08-14T13:16:50-04:00 — #4
give me a little bit of time and i will just load it to my site. once done i will leave a link and what pages to look at. will most likely be late this afternoon.
r58 — 2013-08-14T15:32:21-04:00 — #5
here is the site www.r58apparel.com if you go to the paracord bracelet link, then choose a bracelet(all go to the same page). at this point if you resize your screen the table is now all jacked up. if you choose a size and then add to cart, on the cart page same story. firebug let me know that i was looking at tables but being new to html,(1 year)css and now wordpress. i do not know how to make the tables responsive.
ralphm — 2013-08-14T18:30:31-04:00 — #6
Those tables seem responsive to me. Have you fixed this already?
r58 — 2013-08-14T20:42:46-04:00 — #7
no i have not. the paracord page the one with the 4 bracelets was done with div's. that page works fine. it's the product page that is jacked up. just looked at my site with my ipad and the products page looks good. on my android phone the products page is ugly and the cart page the table is running off my screen
r58 — 2013-08-14T21:06:54-04:00 — #8
this is what i'm getting
mittineague — 2013-08-14T23:59:38-04:00 — #9
It looks like the table is about as responsive as it can be - the form buttons flow.
The table cells (without break word) can only get as narrow as the longest word before you'll see "overflow" problems.
But you might be able to help things by reducing:
a little but not so much as to hamper readability. You could try letter-spacing too.
"Quantity" seems to have extra space. And I don't see why "x" is taking more space than it needs (img margin?).
*this is as narrow as I could go before the table had "overflow" problems.
r58 — 2013-08-15T02:03:46-04:00 — #10
thanks for the help. i will look for those items in the css and try changing them for the smaller view point. yes Quantity does seem to have some extra space. never noticed the space that the "x" has, thanks for pointing that out. will look into that also. may also put a notice on the home page that "if viewing on a mobile device best seen in landscape mode".