#ageModal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } #modalContent { background: linear-gradient(to right, #ff758c, #ff7eb3); margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; } #modalContent > p { font-size: 16px; color: #333; } #modalContent > button { margin: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } @media (max-width: 600px) { #modalContent { width: 90%; } }