-
Posts
-
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.
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
Hi,
Thanks, both display now. However – whether viewed in portrait or landscape layout, the two columns appear above and beneath each other, not alongside.
Sure – siptrunkplus.com
Table is under heading”Quick Comparison of Our SIP Trunk Plus Service” on the homepage
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
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
Hi, we’ve tried both options – Ismael’s and Dude’s. The table still appears with one column showing above the other.
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
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”.
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
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: https://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.
-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?
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.
Okay, removed initial .CSS – gone back to only displaying one column with “got it” text. Can view it at http://www.siptrunkplus.com
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
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, https://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:
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
- The topic ‘Description Column in Tables Not Displaying on iPhone’ is closed to new replies.