Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
    Posts
  • #516008

    Hi

    Is there any way I can apply formatting to this table on my product pages?

    http://screencast.com/t/0fHzj7dg31

    http://dev2.electrixinternational.com/product/ (Purchase code hidden if logged out) /

    I want to make the first column wider, the first column text #007ab6, and I want it to be responsive like this table

    http://dev2.electrixinternational.com/products/trunking-systems/flat-lid-trunking-system/#toggle-id-1

    So when it is viewed on a mobile, the first column appears above the second column when its viewed on a smaller screen ….
    http://screencast.com/t/sDOok407vv

    I basically want the first table to look like the one here http://screencast.com/t/sDOok407vv only with the first column set to a % width so it doesnt need to wrap.

    #517138

    Hi

    Is anyone able to offer any suggestions to this?

    #517957

    Hey!

    please refuse from bumping into your own thread, as it pushes it behind in our queue and then we can’t provide a faster reply to you.

    It looks to me as if you already achieved what you wanted, because it looks like in your screenshots and you could even adjust the blue color.

    For another responsive behavior try this:

    @media only screen and (max-width: 767px) {
    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;
    }}
    

    and adjust as needed.

    Best regards,
    Andy

    #518255

    Hi

    That almost works but not quite …

    http://screencast.com/t/n5GBQYqMssLJ

    The text from the TD ends up underneath the wrapped text from the TH.

    It is very close though.

    I have tweaked the settings slightly but I cant seem to get the TH to always be above the TD.

    Also how would I go about adding a border to this?

    #519260

    Hi!

    adding a min-width value should do the job:

    @media only screen and (max-width: 767px) {
    div table.shop_attributes th {
    min-width: 210px;
    }}
    

    Regards,
    Andy

    #519290

    Hi

    Thats almost fixed it however there are a couple of minor issues remaining …

    The white has padding on the left but not on the right.

    When a TH wraps, the TD clashes into it.

    http://screencast.com/t/0rIavCLIy

    #519295

    Hey!

    that is why I tried to add a min-width value, so the title will stay on one line only. Try to play around with a higher value for min-width, until it fits for you.

    Best regards,
    Andy

    #519298

    I have tried increasing the min-width but if I increase the min-width on the TH, the TD starts further across.

    Here is my code …

    @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; */
        min-width: 210px;
    }
    div table.shop_attributes td p {
        /* width: 76px; */
        min-width: 210px;
    }}
    #519302

    Hi!

    I checked it and it looks fine to me now:

    View post on imgur.com

    Please check on a real mobile device. Clear browser cache and hard refresh.

    Best regards,
    Andy

    #519321

    Hi

    This is how it looks on my iPhone …

    http://screencast.com/t/92X9BwrT

    #519335

    Hi!

    which iPhone version do you have? and which browser are you using?

    Best regards,
    Andy

    #519339

    Hi

    Latest iOS 9.

    Safari.

    #519796

    Hey!

    I mean which iPhone version do you have? iPhone 4, 5? or 6? It looks fine using chrome emulator for iPhone. Don’t forget to clear browser cache and try to play with the values in my code until it fits for you.

    Regards,
    Andy

    #519802

    Hi

    iPhone 5S.

    I have tried deleting all browsing history etc in Safari and the text still overlaps.

    http://screencast.com/t/HceJ2VZS8

    #519822

    Hi!

    let me tag someone with an iPhone from our team, because I can’t see what’s shown on your screenshot.

    Best regards,
    Andy

    #519832

    Hi!

    It does look fine on my iphone 5s – http://i.imgur.com/GQgVqPn.png but i believe we are checking the wrong page. Can you please post the link to your page where we can reproduce the issue?

    Regards,
    Yigit

    #519848
    #519875

    Hi!

    Please find following custom CSS code

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

    and change it to

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

    Regards,
    Yigit

    #519930

    Hi

    That almost fixed the table and I have centred the text sho it looks better.

    Three outstanding points:

    1) How can I have the TH text to Title Case or whatever case the attributes were originally written in?

    2) How can I dd a border to the table so it matches the border on the other tabs (using Enfold tables)? http://screencast.com/t/cOHTvhTQtz

    3) How can adjust the width of the table so it sits central withing the tab? I think it is the TR. http://screencast.com/t/dVj1gWEzEWHL

    Thanks

    #519956

    Hi!

    Please add following code to Quick CSS

    table.shop_attributes * {
        text-transform: capitalize;
        text-align: center; 
    }

    I have replied border related question in your other thread. Please do not created duplicated topics as it is making it harder for us and for other users to follow.

    Regards,
    Yigit

    #519958

    Hi!

    1.) Not sure what you mean. Can you explain further what you are trying to achieve please?

    2.) use this code:

    div table.shop_attributes th {
    border: black 1px solid;
    }
    

    3.) It does sit centered for me:

    View post on imgur.com

    Cheers!
    Andy

    #519979

    Hi Yigit

    That works pretty well however the font is more spaced out on the Specifications than it is on the other table tabs …

    http://screencast.com/t/11R2vudQd6f

    http://screencast.com/t/EyiIb8G2

    ANDY

    1) Yigit answered this. I am using this …

    table.shop_attributes * {
        text-transform: capitalize;
    }

    But Capitalize isnt really the correct option. I want the font to appear as it is in the attributes. e.g. with dimensions, mm is correct but capitalize makes it Mm.

    2) Thanks I used this recommended by Yigit, but it messes up the borders when viewed on a mobile

    table.shop_attributes th, table.shop_attributes td {
        border: 1px solid #e2e2e2!important; 
    } 

    3) If you look at this, the table is sat centrally in the tab with grey down both sides

    http://screencast.com/t/6MDU5b42M

    However if you look at the specifications tab, there is a larger gap down the right of the table and the white continues to the right of the tab …

    http://screencast.com/t/bzTmfDCZW2

    #519987

    Hi!

    1- Please change the code to following one

    table.shop_attributes * {
        text-transform: none;
    }

    2- Please stick to the other thread – http://www.kriesi.at/support/topic/border-around-specification-table/
    3- How are you adding content to “Specs” tab?

    Cheers!
    Yigit

    #519995

    1) Thanks
    2) Ok
    3) On WooCommerce tab manager, you assign attributes to a part and these attributes show up automatically in the Specifications tab. http://screencast.com/t/VBt9qFaaW0 http://screencast.com/t/M7dF4IQKxlVg

    #521547

    Hi!

    Please add following code to Quick CSS

    @media only screen and (max-width: 480px) {
    table.shop_attributes tr {
        background: transparent!important;
    }
    table.shop_attributes * {
        max-width: 240px!important;
    }
    table.shop_attributes tr:nth-child(even) th {
        background: white;
    }}

    Best regards,
    Yigit

    #521555

    Hi

    That almost fixed it.

    The only issue now is the text is either touching the border or actually overlapping it when viewed on a mobile …

    http://screencast.com/t/tbpEs45gs

    Also on the larger iphone screens (such as the 6+ portrait) the table does not grow in width within the tab so there ends up being a larger grey section down the right of the table. I would have expected the table to grow within the tab.

    http://screencast.com/t/m13TnHhj4UkP

    #521564

    Hi!

    Can you please try changing the second code to following one

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

    and check if that helps?

    Cheers!
    Yigit

    #521574

    That doesnt seem to work …

    This is my code for that section at present …

    @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; */
        min-width: 250px;
        text-align: center;
        padding-top: 5px;
    }
    div table.shop_attributes td p {
        /* width: 76px; */
        min-width: 250px;
        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;
    }}
    
    /* General changes */
    table.shop_attributes th {
        border: 1px solid #e2e2e2!important; 
    } 
    @media only screen and (min-width: 414px) { 
    table.shop_attributes td { 
        border: 1px solid #e2e2e2!important; 
    }}
    
    table.shop_attributes th {
        min-width: 200px;
    }
    
    table.shop_attributes * {
        text-transform: none;
        letter-spacing: 0.0px;
        /* text-align: center; */
    } 
Viewing 28 posts - 1 through 28 (of 28 total)

You must be logged in to reply to this topic.