Responsive Design for Section Headings

This CSS snippet demonstrates responsive design techniques using media queries to adjust the font size of headings in the patient section based on different screen sizes. It ensures optimal readability across a range of devices, from large desktops to smartphones.

user_5561620

css

14 days ago

964 B

Indexable

Never

/* Grote desktops en laptops (1440px en hoger) */
@media (max-width: 1640px) {
    .styles_section_patients__i6ZJV h1 {
        font-size: 2.45rem;
    }
}

/* Grote desktops en laptops (1440px en lager) */
@media (max-width: 1440px) {
    .styles_section_patients__i6ZJV h1 {
        font-size: 2.1rem;
    }
}

/* Middelgrote desktops en laptops (1280px en hoger) */
@media (max-width: 1280px) {
    .styles_section_patients__i6ZJV h1 {
        font-size: 1.7rem;
    }
}

/* Tablets en kleine desktops (1024px en hoger) */
@media (max-width: 1024px) {
    .styles_section_patients__i6ZJV h1 {
        font-size: 1.8rem;
    }
}

/* Grote smartphones en tablets (768px en hoger) */
@media (max-width: 768px) {
    .styles_section_patients__i6ZJV h1 {
        font-size: 2rem;
    }
}

/* Smartphones (onder 768px) */
@media (max-width: 480px) {
    .styles_section_patients__i6ZJV h1 {
        font-size: 1.8rem;
    }
}