The table with years of experience in the index.html file between lines 503 and 548 has a fixed width, which causes it to overflow or create an x-scrollbar on mobile devices.
How to reproduce
Open the index.html file.
Navigate to the section between lines 503 and 548.
View the table on a mobile device or resize the browser window to a smaller width.
Observe that the table overflows or creates an x-scrollbar.
How to fix
Update the table's CSS to use responsive design principles.
Modify the table's width to be fluid (e.g., using percentages or viewport units).
Ensure that the table cells adjust their width and content appropriately for smaller screens.
Test the changes on various screen sizes to confirm the table is responsive.
Changes made:
Updated the CSS in assets/experience-cards.css to include responsive styles for the table.
Modified the HTML structure in index.html to support the responsive design.
Original issue: #111
Why the bug occurs
The table with years of experience in the
index.html
file between lines 503 and 548 has a fixed width, which causes it to overflow or create an x-scrollbar on mobile devices.How to reproduce
index.html
file.How to fix
Changes made:
assets/experience-cards.css
to include responsive styles for the table.index.html
to support the responsive design.Test these changes locally