Fix columns for Mobile version - soccer ladder

Design help General
1

Hi all,

Having a minor issue with a table not correctly resizing for mobile. Any quick tips on where I have gone wrong?

Mobile:

Any ideas?

Here is my public share link: LINK
(how to access public share link)

2

Hi. Add url in general (url + screenshot).

Option 1: Small font size/space/little padding and idea like this (to avoid line break)

Option 2 (responsive)
overflow-x:auto

For now you dont have this property inside webflow UI so add extra code:

<style>
table.my-selector{
overflow-x:auto;
}
</style>

.my-selector (some class you added - if you dont want this style to affect all of your tables).

Example (resize Window):

Option 3 - Change the layout by some CSS framework:

Add this to the head and create the markup (you will see this styles only on the publish site)
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/table.min.css

3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.