This topic has 20 replies, 3 voices, and was last updated 8 years, 5 months ago ago by Eva Kemp
Hello,
please have a look at the table price in a mobile display…
http://www.schools-ceilidh.com/
I need that every first row cell will be in line with the other 3 one. (in mobile version)
Depends from the content, it isn’t?
http://www.schools-ceilidh.com/wp-content/uploads/2016/06/unnamed.png
How to solve this point?
Waiting for you
Thanks
Chiara
Hello,
I don’t see such issue on mobile:
http://storage8.static.itmages.com/i/16/0615/h_1465982174_7634597_ff66fa51b5.jpeg
Try to clear browser cache and check again.
What mobile device are you checking in?
Regards,
Eva Kemp.
I’m checking drom a Samsung Dual Core 2 and I have your same error visualization.
Please fix that the second column values are not in line with the correspondent other three column values ones.
Furthermore my second column is cutted (overlapped) and the table looks not responsive.
I need visualize all the 4 columns complety and that every column line value is inline with the lateral one, as let a user to understan clearly all the table price informations.
I hope I can clearity the point,
waiting for yor assistance
Chiara
Hello,
In this case text font size should be decreased.
But the size will be so small so you can’t read the titles of the tables.
You’d better use full column width as it was before by default.
Regards,
Eva Kemp.
Sorry Eva,
I didn’t understand well how to solve the matter.
I need that all two visualization (laptop and mobile) will displayed in a responsive and clear way.
How have I to change my table structure?
How can I restore a full column width?
Thank you in advance
Hello,
To restore a full column width you need remove changes made in this topic https://www.8theme.com/topic/mobile-version-table-adaptment-not-showed/
Regards,
Eva Kemp.
Well,
so I have to remove alle previous change?
This Custom CSS for mobile:
.ult_pricing_table .ult_pricing_heading h3, .ult_price_features p {
font-size: 13px !important;
and also the with column?
I’ve set custom column width for each column in VC editor (just for mobile):
http://storage3.static.itmages.com/i/16/0604/h_1465028293_8134195_f672506730.jpeg
So I will not visualize a 4 column table in mobile?
Wainting for understand is I can reach my goal or it’s not posible with the theme,
thanks
Hello,
Unfortunately what you want to achieve can’t be done as it will have not perfect view on mobile, so we recommend you to remove the previous changes that were made, this css code:
.ult_pricing_table .ult_pricing_heading h3, .ult_price_features p {
font-size: 13px !important;
}
and remove these settings:
http://storage3.static.itmages.com/i/16/0604/h_1465028293_8134195_f672506730.jpeg
Regards,
Eva Kemp.
Ok,
I’m still working on it, arranging a good solution for mobile visualization.
I’ve restore a 4 column width, reduced the text inside in a way to igualize the lines of every column and looks almost perfect, but there is something still wrong, because only 3 of the 4 columns are displyed in my screen and the forth one, below.
Can you reduce a little bit the mobile visualization padding or white margin among the columns in the way to let to the four columns coexist at the same time?
Waiting for your support and solve in a good way the matter,
thank you in advance
Hello,
I’ve changed column width for the 3rd column http://prntscr.com/blllfr and now columns are shown like this on mobile:
http://prntscr.com/bllloq
Please check.
Best regards,
Jack Richardson.
Thank you Jack,
good solution, but something still not work correctly.
Please have a look to this foto
http://www.schools-ceilidh.com/wp-content/uploads/2016/06/Foto-del-27-06-16-alle-16.28.jpg
There are two last points of this tables that we need to control:
A. The second column widht doesn’t respond to the responsive fixed width.
I need that all the 4 columns respond to the same width rule. Now the second one is strangly cutted.
B. In mobile visualization doesn’ exist a margin right, only a left one. I don’t understand why this element is not responsive. I need your help for build it manually. Can you please igualize the right and left margin?
Please I need your support,
my customers is pending about this point from more than 10 days.
Please, have a deep check and technical intervent.
Thanks
Waiting can close the matter as soon as possible,
thank you in advance
Hello,
I’ve added the code in CSS block of VC editor:
http://prntscr.com/bm3c90
Clear browser cache and check the site now.
Regards,
Eva Kemp.
Looks fine!!!
Remain only a little adjustment. It’s a little bit strange but first 2 element my second column are distributed in one only line and not in two lines, like the others.
Please, have a look at this screenshot
http://www.schools-ceilidh.com/wp-content/uploads/2016/06/83457e43-d3a0-4c21-9918-e2270ba93c5e.jpg
I’s a little bit strange because all the element have the same spacing and words but they are located in different way. I need that all the second column element, will distributed in two lines (like from the third until the last one).
How can I solve this point?
It’s the last one!
Hope can close the ticket today
Thanks
🙂
Hello,
In this case you have to use <br>
tag after each number “50”, “30” and so on.
Regards,
Eva Kemp.
There’s a little problem usign <br> tag.
I want the only the mobile version are distributed in two line, but I want that remains in one only line. So I can’t use <br> tag in my column.
Why from the third element of the second column work correctly without <br> tag, and what about the first two one? I need to correct only the first two one alignment in two lines, but only in mobile version.
Waiting for your support,
Have you just change / work on something?
I don’t know why but suddenly the table is perfect.
Hello,
We haven’t made any changes.
Is the issue resolved now?
Regards,
Eva Kemp.
Yes!
Maybe was only a temporary error of the table!!
Solved, cool!
Thanks
Bye
Hello,
You’re welcome.
Regards,
Eva Kemp.
Tagged: display, layout, mobile, overlapping, themes, woocommerce, wordpress
The issue related to '‘Mobile Display Layout Overlapping!’' has been successfully resolved, and the topic is now closed for further responses