SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member R58's Avatar
    Join Date
    Aug 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    wordpress responsive help needed

    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.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,420
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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/show...Posting-Basics

  4. #4
    SitePoint Member R58's Avatar
    Join Date
    Aug 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member R58's Avatar
    Join Date
    Aug 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R58 View Post
    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.
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Those tables seem responsive to me. Have you fixed this already?

  7. #7
    SitePoint Member R58's Avatar
    Join Date
    Aug 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Member R58's Avatar
    Join Date
    Aug 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R58 View Post
    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
    screen shot.jpg this is what i'm getting

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,420
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    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:
    font-size: 100%;
    padding: .8em;
    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.
    table.png

  10. #10
    SitePoint Member R58's Avatar
    Join Date
    Aug 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    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:
    font-size: 100%;
    padding: .8em;
    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.
    table.png
    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".


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •