display: table and display: table-cell mobile friendly solution

[gucu]

Hi

http://wp.me/p84map-1J

On the above page, I am trying to replace the image with a css mobile friendly solution. I created a css table using table and table-cell. However, the percentage widths are being ignored when viewed through a mobile. The mobile is varying the cells dependent on the amount of text.

It looks as if WordPress is displaying it correctly. However, I am writing the code for a different site using a home grown cms. Nothing to do with me and I have limited access. The page is here.

http://encounterwalkingholidays.com/rich-test-page

Can anybody point me in the right direction to make it work please?

Thanks

Rich

[Beverleyh]

However, the percentage widths are being ignored when viewed through a mobile. The mobile is varying the cells dependent on the amount of text.

It looks fine on iOS. Which environment (OS/browser) does the problem occur in?

It will also be easier for us if you provide a reduced demo in codepen.io, showing just enough markup and CSS to demonstrate the problem.

[Shikkediel]

Just a shot in the dark but yesterday I happened to notice my ol’ Android 2.3 did not respond to setting widths on table cells, only min-width.

[Shikkediel]

I’m currently resorting to this, seems to work on early Android as well:

https://css-tricks.com/fixing-tables-long-strings/

[Beverleyh]

Interesting. I haven’t explored this property a great deal before. I will play more with it when I’m back in a desktop.

[gucu]

Hi

Sorry for the delay in answering. Away for the weekend. Here is the codepen:
https://codepen.io/gucu/pen/JbxJjQ

I added code from the link to table: fixed reply.

Thanks

Rich

[Author]

Posts