Different padding values for different screen resolutions

[thomasbritton]

Hi,

Is there a way how I could change the paddingLeft and paddingRight values for different screen resolutions?

[thomasbritton]

I have achieved it using the following but it would be good to know if there is a better approach

const [padding, setPadding] = useState({ paddingLeft: 0, paddingRight: 0 })

useEffect(() => {
    const handleResize = () => {
      if (window.matchMedia('(min-width: 768px)').matches) {
        setPadding({ paddingLeft: 0, paddingRight: 0 })
      } else {
        setPadding({ paddingLeft: 30, paddingRight: 30 })
      }
    }

    handleResize()

    const tabletDevice = window.matchMedia('(min-width: 768px)')

    tabletDevice.addEventListener('change', handleResize)

    return () => {
      tabletDevice.removeEventListener('change', handleResize)
    }
  }, [])

<AliceCarousel
  mouseTrackingEnabled
  responsive={responsive}
  infinite
  className="flex gap-[10px]"
  paddingLeft={padding.paddingLeft}
  paddingRight={padding.paddingRight}
>
    ...
</AliceCarousel>