Custom CSS only showing on mobile browser

[Phil_Bailey]

I’ve added a little custom CSS on a post to put a drop shadow for all cells within a grid. It displays just fine on my mobile browser (Safari), but for some reason it’s not showing on desktop at all.

I don’t think it’s an overflow issue as the Grid has it set to ‘visible’ (as do all parent containers) and the cells do as well.

This is the CSS which I’ve applied to the Element CSS for the Grid:

$el .x-cell {
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.65) !important;
}

[ruenel]

Hello Phil,

Thanks for posting in! Please provide the URL of the page so that we can inspect and figure out why your custom CSS is not working.

Best Regards.

[Phil_Bailey]

This is the page:

https://sweetchilli.design/typographic-illustration/

[ruenel]

Hello Phil,

Your code did not work because you have inserted a broken CSS code in the Section element:

/* For smaller breakpoints: Swap the order */
@media (max-width: 766px) {
  .elemen-class {
    /* your styling here */
  }
}

Your code is missing the closing } curly brace in line 22.

[Phil_Bailey]

Amazing! Thank you so much - I spent ages trying to figure this out.

[tristup]

Hi Phil,

Glad that we are able to help you.

Thanks