Dear EO website team,
I am writing to propose a potential solution to an issue I have observed with our website’s responsiveness on lower resolution devices, such as mobile phones.
During my recent interactions with the website on such devices, I noticed that the current design does not adapt optimally to smaller screens. This observation led me to develop a custom CSS stylesheet that aims to enhance the website’s performance and visual appeal on these devices.
While the proposed stylesheet is still a work in progress, preliminary tests have shown promising results. The website’s functionality on lower resolution screens has improved noticeably with the implementation of this stylesheet.
I believe that integrating this CSS into the official website could significantly enhance the user experience for visitors accessing our platform on mobile devices. Therefore, I kindly request the administrators to consider this proposal for official implementation.
I apologize if this topic has been posted in the incorrect category. If so, I would appreciate guidance on the appropriate section for such discussions.
Thank you for your time and consideration. I look forward to hearing your thoughts and feedback on this proposal.
Please find below my proposal for the CSS I made:
@media (max-width: 1500px) {
#scoresTable {
width: 900px
}
#scoresTable tr {
display: block;
width: 90%;
height: 370px;
margin: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
overflow: auto;
}
#scoresTable tr:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#scoresTable td {
padding: 2px 16px;
display: block;
word-wrap: break-word;
}
#scoresTable tbody {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
align-items: stretch;
}
#scoresTable thead {
display: none;
}
}
Additional info: this was tested on a 1080p monitor with the Stylish extension for Google Chrome.
Best regards.