Targeting mobile for a "spacer" content block

Hello,

I would like to assign specific properties to a "spacer" content block when it's displayed on mobile, since I don't want as much space displayed.

I would like the space between the header and the title to either disappear on be much smaller on mobile.

I tried the following code but to no avail
------------------------------------------------------------------------------------------------------------------------------------------------------
div.spacer {
min-height: calc(62vh - 290px);
}

@media all and (min-width:960px) and (max-width: 1024px) {
div.spacer {
min-height: calc(30vh - 100px);
}
}
------------------------------------------------------------------------------------------------------------------------------------------------------

Thanks!
Thomas