Week 6:

Media Queries: Breakpoints



Using media queries to establish breakpoints allows the structure of your layout to adapt based on different screen resolutions. The content below changes how it is displayed on the page based on the width of the browser.

100%
33.33%
33.33%
33.33%
50%
50%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%
25% inside 33%



.full{
    width: 100%;
    padding: 100px 0 100px 0;
    background-color: white;
    color: black;
    text-align: center;
}

.half{
    width: 50%;
    padding: 100px 0 100px 0;
    text-align: center;
    float: left;
}

.third{
    width: 33.33%;
    padding: 100px 0 100px 0;
    text-align: center;
    float: left;
}

.quarter{
    width: 25%;
    padding: 100px 0 100px 0;
    float: left;
}

@media screen and (max-width:1200px) {
    .quarter{
        width: 50%;
    }
}

@media screen and (max-width:1000px) {
    .third{
        width: 100%;
    }
}

@media screen and (max-width:800px) {
    .quarter{
        width: 100%;
    }
    .half{
        width: 100%;
    }
}

Resources