XF 2.1 Make notice banner responsive and adaptive to mobile

Andy.N

Well-known member
The title may not entirely capture what I'd like to achieve so any input or pointer is appreciated.
Basically, I have been using the notices system as a leaderboard banner on my site.
The notice system allows you to hide when the smaller width like on a mobile device.

What I want is not that. I want the full banner to show on desktop but on smaller width devices, the banner would show a minimized version?

Is this something I need to achieve with some javascript? What is it called?
Below is the simple 3 columns text notices I have. As you can see, on mobile, it will be a huge block of text. i want to show a shorter version of this on mobile.

Thanks everyone.

Screen Shot 2020-07-07 at 11.59.01 PM.png
 
Top