-
Posts
-
Dear Kriesi Team,
I’m creating a new website for a sport club using the Enfold theme. Nearly everything works comfortable and very well and I made some customizations without bigger problems. But right now I need a little help and could’t find a suitable solution on the Enfold help pages. I need some „old-fashioned“ tables for monthly programs and league tables. I constructed these tables with flexible columns widths in percentage and font sizes in em. These tables look good on desktop screens, but when it comes to small portrait viewports with a width of 320 or 350 pixel, the tables are cut off on the right side. I want the whole tables completely at a glance without horizontal scrolling, even if the text elements might get very small then. I guess the solution for the problems could be a CSS style like float: left; oder overflow-x: visible, but I can’t find the right assignment. The site is under construction and hosted temporarily on a private site.
I would appreciate an advice, thanks in advance.I guess, lastly I came to the solution by myself. It’s a good idea to build tables with flexible columns with percent values. But it’s only one condition for good results on small viewports. The other one is to reduce the font sizes. If you keep the original sizes, there’s not enough space for the content and an overflow rule will take place to hide the rest. But when I reduce the font sizes the table design changes, too. So I will duplicate all of the desktop table CSS and customize the font sizes, the padding values and columns widths in a @media definition.
- The topic ‘Tables are cut off on small viewports’ is closed to new replies.