Search code examples
htmlcssmedia-queries

CSS media query not working as expected at breakpoint

CSS has a breakpoint set at 768px. When below or over the breakpoint, objects will stretch accordingly. Exactly at 768px some objects won't stretch. How is that? Take a look here at the first row below the initial slider: at 768px, the picture will not stretch to fill the available width.

Solution

  • You have inconsistent queries.

    The padding-left of the panel-grid-cell is set to 0 when max-width: 767px not 768px.

    // custom-style.css:30164 (when un-minified)
@media (max-width: 767px) {
    .thim-welcome-university>.panel-grid-cell:nth-child(2) {
        padding-left: 0!important;
    } 
}

    Modify that to 768px :)