This css works fine in desktop environment, but whatever I try, I am not able to get the form wider (more readable in responsive mode) <style>
/* Styles desktop */
.login-form {
max-width: 600px;
margin: 40px auto;
padding: 20px;
background: #f9f9f9;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: Arial, sans-serif;
color: #333;
}
.login-header { text-align: center; margin-bottom: 20px; }
.login-logo { vertical-align: middle; max-width: 150px; }
.login-links a { text-decoration: none; font-weight: bold; color:#0073e6; margin-top: 10px; display: inline-block; }
.login-title { text-align: center; }
.login-field { margin-bottom: 15px; }
.login-field label { font-weight: bold; font-size:20px;}
.login-input { width: 100%; padding: 8px; box-sizing: border-box; }
.login-radios div { margin-bottom: 10px; font-size:20px;}
.login-submit { text-align: center; margin-top: 10px; }
.login-btn { padding: 10px 25px; font-size: 16px; background-color: #0073e6; color: white; border:none; border-radius: 4px; cursor: pointer; }
.login-footer { text-align: center; margin-top: 15px; }
.login-footer a { color:#0073e6; text-decoration:none; font-weight: bold; }
/* Responsive */
@media (max-width: 768px) {
.login-form {
width: 95%;
margin: 20px auto;
padding: 25px;
font-size: 1.3em;
}
.login-logo { max-width: 120px; margin-bottom: 15px; }
.login-input { font-size:2em; padding: 12px; }
.login-btn { font-size: 1.2em; padding: 14px 30px; }
.login-links a, .login-footer a { font-size: 1.2em; }
}
</style>
