New Topic

Dynamic Tables for Mobile and Desktop

Home › Forum › Customization › Dynamic Tables for Mobile and Desktop

This topic contains 8 replies, has 2 voices, and was last updated by  StartupWP 3 years, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 4, 2015 at 8:01 AM #2164

    goutresolve
    Participant

    I have a site http://www.GoutResolve.com and at the bottom of the page I have a table that includes our 3 products. When viewed on a desktop, everything looks and functions properly. When viewed on mobile, the table won’t resize so it sticks out like a sore thumb. I’m using the TablePress plugin to create the table.
    Ideally, when viewed on desktop, the 3 products will be side by side the way they are now and when viewed on a mobile device the table will switch so they are aligned vertically or the table would simply resize. My concern with simply resizing is that the pictures and text would be too small.
    Is there a way that I can have a “smart” table that would load depending on the device?
    A direct link to the store page is http://www.GoutResolve.com/buy-gout-resolve
    Thank you.

    March 4, 2015 at 9:44 PM #2165

    StartupWP
    Keymaster

    Let’s use divs instead like so:

    <div class="product-boxes">[product id="1"]</div>
<div class="product-boxes">[product id="2"]</div>
<div class="product-boxes">[product id="3"]</div>

    Then add this CSS:

    .product-boxes{box-sizing:border-box;width:33.3%;padding:10px;float:left}
@media all and (max-width:480px){.product-boxes{width:100%}}

    That should be close, but a few more adjustments will probably be needed so update us after you’ve updated the code.

    June 24, 2015 at 9:39 AM #2275

    goutresolve
    Participant

    Sorry for taking so long to respond. That seems to have helped the formatting between desktop and mobile. Here is the test page that I’m working on. The code is at the bottom. http://www.GoutResolve.com/home-test

    Here are the tweaks I’m trying to do now.
    I’d like to make borders around each of the divs so that each product has its own box. How would I do that?
    I’d like to center the products and text over the “add to cart” button. I had previously used this code and it stopped working when I implemented the code above. Any idea how to implement it so that both things work?
    .woocommerce ul.products li.product a img,
    .woocommerce-page ul.products li.product a img
    {margin: 0 auto 8px}

    .woocommerce ul.products li.product h3,
    .woocommerce-page ul.products li.product h3
    {text-align:center}

    .woocommerce ul.products li.product a,
    .woocommerce-page ul.products li.product a
    {margin:0 0 0 18%; min-width:100px; width: 50%; text-align:center}

    Last, I’d like to make the products themselves bigger. When viewing on mobile they are perfect but when viewing on desktop they are really small. Any way to make them larger?

    June 24, 2015 at 9:53 AM #2277

    goutresolve
    Participant

    Also, I just noticed that when I implement that code that it makes the images in my ingredients table really small when viewing on desktop. When I take the @media all… bit of code out it fixes that problem but then when I’m on mobile the product layout gets messed up. Any way to have it do both?

    And one final thing, is there a way to get rid of the little dash that’s above the product image?

    June 25, 2015 at 8:18 AM #2283

    StartupWP
    Keymaster

    Give this a try:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: 100%;
}
.woocommerce ul.products li.product a img {
  max-height: 150px;
  width: auto;
}
.woocommerce ul.products li.product::before, .woocommerce-page ul.products li.before {
  content: "";
}
@media all and (max-width: 600px) {
  .product-boxes {
    width: 100%;
  }
}
    June 25, 2015 at 8:44 AM #2285

    goutresolve
    Participant

    Thank you for the help. I really appreciate it.
    That actually looks really good and upon initial inspection there a couple issues:
    The “sale” badge is floating on the right side of the thing instead of it being attached to the left side
    There still aren’t any product boxes around these. Not sure if that was addressed or not.

    June 25, 2015 at 10:25 AM #2289

    StartupWP
    Keymaster

    Add:

    .woocommerce ul.products li.product .onsale {
  left: 0;
  right: auto;
}

    And update:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: 100%;
}

    to:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  background: #f6f6f6;
  box-sizing: border-box;
  min-height: 360px;
  padding: 10%;
  text-align: center;
  width: 100%;
}

    And update:

    .woocommerce ul.products li.product a img {
  max-height: 150px;
  width: auto;
}

    to:

    .woocommerce ul.products li.product a img {
  margin: 10px auto;
  max-height: 150px;
  width: auto;
}
    June 25, 2015 at 10:51 AM #2293

    goutresolve
    Participant

    Nailed it! Thank you so much!

    June 26, 2015 at 10:00 AM #2303

    StartupWP
    Keymaster

    You’re welcome.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.