Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #25391

    Hi,

    We’ve set our Enfold layout to Responsive Layout Large and have a table consisting of two columns – one being a Descriptive Column. When viewed on an iPad, it displays correctly. On an iPhone, however, it only shows the default column. You can imagine how weird it looks as there’s no relative context. How would one go about rectifying this? I have a picture available if you need to see an example of what it looks like.

    #126760

    Hi,

    Please add this on your custom.css or Quick CSS

    @media only screen and (max-width: 767px) {
    .responsive .pricing-table.avia-desc-col {
    display: block !important;
    }
    }

    Regards,

    Ismael

    #126761

    Hi,

    Thanks, both display now. However – whether viewed in portrait or landscape layout, the two columns appear above and beneath each other, not alongside.

    #126762

    Hi,

    Please give us a link to your website.

    Regards,

    Ismael

    #126763

    Sure – siptrunkplus.com

    Table is under heading”Quick Comparison of Our SIP Trunk Plus Service” on the homepage

    #126764

    Hey!

    Hey! You can change that behavior by opening the shortcode.css file and removing line 1054 which reads:


    .responsive .avia-pricing-table-container, .responsive .pricing-table-wrap {
    display: block;
    }

    Best regards,

    Kriesi

    #126765

    I have a feeling this is a ridiculously silly question, but – how do I gain access to that file?

    #126766

    Hey!

    You can use ftp – navigate to wp-content/themes/enfold/css/ and download the file. Then edit it and upload it again. You can also use a plugin like: http://wordpress.org/plugins/solid-code-theme-editor/

    Best regards,

    Peter

    #126767

    Hi, we’ve tried both options – Ismael’s and Dude’s. The table still appears with one column showing above the other.

    #126768

    We’ll need a link seeing the page live with the css change in place to inspect the code and see whats going on then.

    Regards,

    Devin

    #126769

    Sure, it’s the siptrunkplus.com home/landing page. The table previews fine on an iPad and obviously computer screens, just not the iPhone. It’s the table below: “Quick Comparison of Our Sip Trunk Plus Service”.

    #126770

    The line Kriesi specified above to be removed is still there which is why it is still happening. Another option would be to Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    @media only screen and (max-width: 767px){
    .responsive .avia-pricing-table-container,
    .responsive .pricing-table-wrap {
    display: table-cell;
    }
    }

    If you are unable to remove the line.

    Regards,

    Devin

    #126771

    Hi Devin, apparently there was a mis-communication on our part, the person that deals with the CSS tried the first option where you needed to add lines to the CSS, not the second where you had to remove the line. So it was a duplicated effort – so my fault on that, sorry.

    However, your third suggestion seems to be working now, the only problem is that it’s showing the same issue as the table originally did right in the beginning – there was a thread about it on the forum: http://www.kriesi.at/support/topic/description-column-in-tables-not-aligning-properly-with-adjoining-columns

    The issue we were experiencing with the alignment on the website is now occurring on the phone. So both columns are displaying next to each other, but their alignment is off – as described in the above thread.

    #126772

    -Keeping in mind that the lines that were added to the CSS as instructed in the first suggestion are still there – should they now be removed?

    #126773

    Go ahead and remove the initial one and see if that does it. If not, link us directly to the page again with what you have live.

    #126774

    Okay, removed initial .CSS – gone back to only displaying one column with “got it” text. Can view it at http://www.siptrunkplus.com

    #126775

    Hi,

    Please do this.

    1) Add the following CSS

    @media only screen and (max-width: 767px){
    .pricing-table li{
    height:60px
    }}
    @media only screen and (max-width: 479px){
    .pricing-table li{
    height:90px !important;
    }
    }

    2) And open up /css/shortcodes.css and *delete the entire block* on lines 1059-1063 that looks like

    @media only screen and (max-width: 767px)
    {
    .responsive .avia-pricing-table-container , .responsive .pricing-table-wrap{display:block;}
    .responsive .pricing-table{display:block; margin-bottom:40px;}
    .responsive .pricing-table.avia-desc-col{display:none;}
    }

    Thanks,

    Nick

    #126776

    Alright, I think the best thing to do here is to start completely from scratch: the page itself looks terrible now. Tables are not corresponding/aligning correctly in a horizontal manner and first box in the final row is consistently too large compared to the rest – about 3 times too large.

    So, as of today, these are the 3 dilemmas:

    1. Tables are not aligning correctly (the descriptive and default columns are not equalized)

    2. Tables are not displaying properly on iPhones – only default column shows

    3. (New) Tables are not displaying properly on iPads – content is cut off after a certain number of characters.

    In this thread, http://www.kriesi.at/support/topic/description-column-in-tables-not-aligning-properly-with-adjoining-columns the alignment issue in number 1. was sorted, but now the tables have gone wonky again, which is why I suggest starting over, because there’s no point

    in creating css to resolve the iPhones and iPads issues if the tables are displaying incorrectly in the first place.

    Tables can be seen on these two pages:

    http://siptrunkplus.com/

    http://siptrunkplus.com/marketdemandsforcallrecording/

    #126777

    Hi,

    1. I see this in your Quick CSS. Please remove it (all of it)

    @media only screen and (max-width: 767px){
    .responsive .avia-pricing-table-container,
    .responsive .pricing-table-wrap {
    display: table-cell;
    }
    }

    2. I asked you to remove some lines , to *delete the entire block* from shortcodes.css which you have not done.

    This is how you have those lines now (see my previous answer for instructions) ..

    @media only screen and (max-width: 767px)
    {
    /*
    .responsive .avia-pricing-table-container , .responsive .pricing-table-wrap{display:block;}
    */
    .responsive .pricing-table{display:block; margin-bottom:40px;}
    .responsive .pricing-table.avia-desc-col{display:none;}
    }

    and this is how you need to have them

    @media only screen and (max-width: 767px)
    {
    /*.responsive .avia-pricing-table-container , .responsive .pricing-table-wrap{display:block;}*/
    .responsive .pricing-table{display:block; margin-bottom:40px;}
    /*.responsive .pricing-table.avia-desc-col{display:none;}*/
    }

    3) Please make sure that the css i gave you in my previous answer is located **on the very bottom** of your Quick CSS.

    If you follow my instructions, this is how you will see your site:

    http://www.clipular.com/c?10722065=LJJ3AGezHj1ntzhiVQmVbSPUriU&f=.png (tablet)

    http://www.clipular.com/c?10763031=C3vk5V6dC3uqO3NE_okXYqDbluo&f=.png (smartphone)

    Thanks,

    Nick

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Description Column in Tables Not Displaying on iPhone’ is closed to new replies.