Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 15, 2015 at 11:57 am #519165
    richardelectrix

    Hi

    I want my table for woocommerce specification to be as responsive and respond the same as the clever Enfold tables.

    So far I have this …

    @media only screen and (max-width: 1000px) { div table.shop_attributes td {
    display: initial;
    position: relative;
    left: -200px;
}
div table.shop_attributes th {
    width: 225px;
}
div table.shop_attributes td p {
    width: 76px;
}}

    Which works slightly but is a long way from looking correct …

    http://screencast.com/t/jLJcpq1Sx

    http://dev2.electrixinternational.com/product/flat-lid-trunking-length/

    October 15, 2015 at 6:12 pm #519471
    Elliott

    Hey richardelectrix!

    That’s going to take a lot of time and code so you will need to hire a freelancer out to help you with this customization. Or you can try contacting Woocommerce support for help since you have quite a large amount of customization requests.

    Regards,
    Elliott

    November 4, 2015 at 4:24 pm #530165
    richardelectrix

    Hi

    I have this almost looking correct now on mobile.

    The only issue being on the smallest mobile screen it looks fine, but as soon as you increasr the width (e.g. iphone 5s to 6s) the specification table doesnt increase in width. It stays the same width, meaning there is more grey down the right hand side.

    It is extremely close now. Just need the table to grow between mobile sizes.

    November 4, 2015 at 5:59 pm #530305
    Elliott

    Hi!

    Well your setting the widths to px values instead of percentages so that’s to be expected. You can keep adding in more rules for each size I suppose.

    @media screen and (max-width: 400px) {
css to change table widths below 400px screens
}
@media screen and (min-width: 400px) and (max-width: 500px) {
css to change table widths between 400px - 500px screens
}
@media screen and (min-width: 500px) and (max-width: 767px) {
css to change table widths between 500px - 767px screens
}

    Regards,
    Elliott

    November 4, 2015 at 7:18 pm #530369
    richardelectrix

    I would prefer it to be percentage to be honest.

    Just need to know how to do it

    November 5, 2015 at 9:58 pm #531205
    Andy

    Hey!

    then just try

    width: 50%;

    inside your code.

    Regards,
    Andy

    November 9, 2015 at 2:21 pm #532585
    richardelectrix

    Hi

    That doesnt work either.

    http://screencast.com/t/OzJXFXHG

    @media only screen and (max-width: 414px) { 
div table.shop_attributes td {
    display: initial;
    position: relative;
    left: -250px;
    top: 20px;
    text-align: center;
}
div table.shop_attributes th {
    /* width: 225px; */
    width: 50%;
    text-align: center;
    padding-top: 5px;
}
div table.shop_attributes td p {
    /* width: 76px; */
    width: 50%;
    text-align: center;
    padding-bottom: 10px;
}

table.shop_attributes tr {
    background: transparent!important;
}

table.shop_attributes * {
    max-width: 90%!important;
}

table.shop_attributes tr:nth-child(even) th {
    background: white;
}}
    November 10, 2015 at 4:44 pm #533426
    Elliott

    Hi!

    It uses percentages by default. It would be best to just remove all of your custom CSS and it will work properly.

    Regards,
    Elliott

    November 10, 2015 at 5:00 pm #533449
    richardelectrix

    Hi

    It looks rubbish if I remove the CSS as it just displays as a normal table all crushed up, instead of displaying like the Enfold tables do.

    Without the CSS it looks like this … http://screencast.com/t/MHNK4qke

    The enfold tables look like this … http://screencast.com/t/MHNK4qke (much better)

    November 11, 2015 at 6:25 pm #534302
    Elliott

    Hey!

    This is what I’m seeing.

    Regards,
    Elliott

    • This reply was modified 9 years ago by Elliott.
    November 13, 2015 at 2:50 pm #535399
    richardelectrix

    Hi I have managed to get it working.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Responsive specification table’ is closed to new replies.