Using mobile CSS on elements

[Takaji]

I’m building a page where each element has 6rem of padding on the top and bottom sides, and 12rem of padding on the left and right sides. Obviously this is too much padding when viewing the site on mobile, so under the “Customize” tab and in the “Element CSS” field, I added the following code:

@media (max-width: 768px) {
  $el {
    padding: 0;
  }
}

This didn’t have the expected effect of changing the padding of the element to 0 on a mobile browser. Am I doing something wrong?

Site for reference: https://sunordic.org/summit/campus/
The element I tried to apply the mobile CSS to is the element containing the text “Work here. Play here.” near the top.

Thanks for the help!

[Takaji]

I figured it out. I had to target $el.x-section specifically.

[ruenel]

Hey @Takaji,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.