Streaming live at 10am (PST)

Manually overriding css grid with breakpoint

Hey all,

The green module with the four headlines “Independent advice”, " Focused on partnership" etc are build with a css grid. On the desktop it’s one row with 4 columns and on a portrait tablet it’s two rows with two columns in each.

But i need to manually add a breakpoint in between those two views - forexample a breakpoint like 800-1100. The css grid should have the same settings as the portrait tablet - two rows and two columns in each row. I have tried different things like the code below, but I can’t get it to override the desktop-settings within the defined breakpoint.

Hopes it makes sense!

@media only screen and (min-width : 800px) and (max-width : 1100px) {
.container-four-col {
grid-column-gap: 50px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
}


https://preview.webflow.com/preview/enpa?utm_medium=preview_link&utm_source=designer&utm_content=enpa&preview=7aa9e93212a1abbafd6118aa61f8471d&pageId=5cf653e1b1bedb815995001c&mode=preview

Hi,

Try the following in the <head> of the page:

<style>
@media only screen and (min-width : 800px) and (max-width : 1100px) {
    .container-four-col {
    grid-column-gap: 50px !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    }
    }
</style>

Doesn’t work :confused: