moojomoore Posted March 29 Share Posted March 29 (edited) I am working on this page of my website and the table content is overflowing on the right side. The only way I can get the content to stay on the page is if I add a spacer block to the right side, but then there is still a bar on the right side. Not sure how to resolve that. There doesn't look to be any formatting in the HTML for the table that would be causing this. Any help is appreciated! This is my CSS for the table and I have it setup to horizontally scroll/be responsive: /* Points page table formatting */ .responsive-table { overflow-x: auto; } table.points { width: 100%; text-align: left; border-collapse: collapse; } table.points td, table.points th { padding: 7px 7px; } table.points tr:nth-child(even) { background: #D6D6D6; } table.points thead { background: #AC112A; border-bottom: 1px solid #AC112A; } table.points thead th { font-weight: bold; color: #FFFFFF; text-align: left; border-left: 2px solid #AC112A; } table.results thead th:first-child { border-left: none; } table.points td:nth-child(5) { border-right: 2px solid #AC112A; } Edited March 29 by moojomoore clarity Link to comment
tuanphan Posted March 31 Share Posted March 31 You should consider reducing text size by adding this to Design > Custom CSS body { overflow-x: hidden; } .responsive-table th { font-size: 12px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment