-
Posts
-
Hi Enfold Support,
We’re using the table elements to showcase our app partners by category. Private link below. We’d like to make the table more responsive than it is. As you can see we have 8 columns and 4 rows (1 header row with 3 table rows below). Currently the table just shrinks down to where all 8 columns start to overlap and it looks horrible. When it reaches mobile portrait screen width it jumps to one column (8 columns stacked into 1).Ideally we want the table to go from 8 columns down to 4 and finally down to 2 (in mobile portrait). Currently when the table is being viewed in portrait mode on mobile, it goes to 1 column stacking each column where there is too much space on the sides of the single column. Whereas 2 columns would fit perfect in mobile portrait. And for table portrait or mobile landscape, 4 columns would fit really well.
Can you please share the media query css that would accomplish the above? Thank you!
EricHi again,
I’m adding to the support request the page where you can see the issue where the table is having responsive problems adjusting to the different screen sizes. Note how the header text starts to overlap other columns instead of the font size shrinking based on screen size and column width. Adding a media query to have the columns stack 8×1, then 4×2 and then 2×4 would allow enfold table elements to view well on any screen size.
Thanks in advance for any help you can provide.
Best,
EricHi Victoria,
I’m confused. How is the enfold table element NOT a table? Either way, I would think Kriesi would want his table element to be responsive and mobile friendly–which currently it is not. Is there no solution to adjust the css for the table element to update the break points for when the columns split and stack as they do on the one and only break point that exists when it goes to a single column where they are all stacked?I suppose one other solution would be to create 8 columns but the theme only allows 5 columns. We could then do some custom CSS to have the columns split up using media queries.
Please advise. Thanks!
EricAs a work around we copied the element and used the “responsiveness” settings creating table elements of 1×8 columns, 2×4 columns and 4×2 columns choosing to hide each table element / column set based on screen width. This somewhat solves the problem but since the break points are fixed we still have layout issues with the columns at 1×8 columns. The overlapping starts at the 1110px browser window width. Ideally having the table element jump to 2×4 columns wouid be best OR allow the font size to shrink..
Also, we set the 2×4 column table elements for the mobile views in the responsive settings but the theme is forcing a single column where there’s too much space on the sides. How can we override the single column default of the theme to allow for two columns which fit perfectly well (padding and margins) on mobile portrait?
Thanks!
What did you change in the custom css? I had a back up and reverted it back. The site is now working fine.
Hi Eric,
I did not make any changes, I just logged in to check the page again.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 800px) { .responsive #top .pricing-table-wrap { display: table-cell; width: 50vw; } }1If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
Thank you! After adjusting the max width, the custom css worked great. Thanks again!
Eric
- You must be logged in to reply to this topic.