Both sidebars layout : changing the breakpoint

Hi,

I noticed that with the both sidebars layout, the mobile breakpoint where the sidebars go under the content is set to a screen under 1280px. If users consult the website with 13 inches computers (like the Macbook Pro 13, that is very popular), they can never see the sidebars on the side, just under the content because their screen is smaller than 1281px.

I would like to set this breakpoint just a little lower, so the users on 13 inches laptops could see the sidebars on the side and tried to do so with custom CSS, using this code (replaced 1280 with 1080), but it is not working. Could you guide me? I tried a lot of different custom css codes and I could not find the solution…

/*————————————*
All Devices under 1280px
*————————————*/
@media only screen and (max-width: 1080px) {
/* Both sidebars layout */
.content-both-sidebars .content-area {
float: none !important;
width: 100% !important;
left: auto !important;
border-width: 0 !important;
}
.content-both-sidebars:not(.separate-layout) .content-area {
padding: 0 !important;
margin-bottom: 40px;
}
.content-both-sidebars .widget-area.sidebar-primary, .content-both-sidebars .widget-area.sidebar-secondary {
float: left;
width: 49% !important;
left: auto !important;
padding: 0 !important;
}
.content-both-sidebars .widget-area.sidebar-primary {
float: right;
}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary, .content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary {
width: 48% !important;
}

Thanks!!

The page I need help with: [log in to see the link]