Return to previous page

Mobile Display Layout Overlapping! - by Webacto

This topic has 20 replies, 3 voices, and was last updated 8 years, 4 months ago ago by Eva Kemp

Webacto

Participant

June 15, 2016 at 07:11

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

Please, contact administrator
for this information.

#129657 Copied

19 Answers

Eva Kemp

Support staff

June 15, 2016 at 10:16

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.

#129701 Copied

Webacto

Participant

June 16, 2016 at 20:26

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

Please, contact administrator
for this information.

#130015 Copied

Eva Kemp

Support staff

June 16, 2016 at 20:43

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.

#130019 Copied

Webacto

Participant

June 21, 2016 at 18:18

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

#130515 Copied

Eva Kemp

Support staff

June 22, 2016 at 12:20

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.

#130622 Copied

Webacto

Participant

June 23, 2016 at 07:04

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

#130760 Copied
Eva Kemp

Support staff

June 23, 2016 at 08:20
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.
#130773 Copied
Webacto

Participant

June 26, 2016 at 22:40

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

Please, contact administrator
for this information.

#131120 Copied

Jack Richardson

Support staff

June 27, 2016 at 10:31

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.

#131184 Copied

Webacto

Participant

June 27, 2016 at 15:37

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

#131246 Copied

Webacto

Participant

June 28, 2016 at 07:07

Waiting can close the matter as soon as possible,

thank you in advance

#131342 Copied

Eva Kemp

Support staff

June 28, 2016 at 12:40

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.

#131425 Copied

Webacto

Participant

June 28, 2016 at 15:35

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
🙂

#131478 Copied

Eva Kemp

Support staff

June 29, 2016 at 07:34

Hello,

In this case you have to use <br> tag after each number “50”, “30” and so on.

Regards,
Eva Kemp.

#131534 Copied

Webacto

Participant

June 29, 2016 at 17:55

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,

#131739 Copied

Webacto

Participant

June 29, 2016 at 18:09

Have you just change / work on something?

I don’t know why but suddenly the table is perfect.

#131743 Copied

Eva Kemp

Support staff

June 29, 2016 at 19:16

Hello,

We haven’t made any changes.
Is the issue resolved now?

Regards,
Eva Kemp.

#131759 Copied

Webacto

Participant

July 1, 2016 at 09:28

Yes!
Maybe was only a temporary error of the table!!
Solved, cool!

Thanks
Bye

#132063 Copied

Eva Kemp

Support staff

July 1, 2016 at 09:36

Hello,

You’re welcome.

Regards,
Eva Kemp.

#132067 Copied
Tagged: display, layout, mobile, overlapping, themes, woocommerce, wordpress
Viewing 20 results - 1 through 20 (of 20 total)