Announcements JSON - Resposnsive issue

[UrbanCurry]

I'm using this JSON - very useful, but on smaller screens we seem to have a slight issue:

Announcements

As you can see from the image, the tiles squish to the left above each other - unlike the native SPO types above (Quick Links). I'm using the same JSON unadjusted but wonder if anyone could assist to make these tiles look better on mobile or smaller screens?

Thanks as always and a quick shout out to David Ramalho for the JSON, very useful - for page Tips & Guides as well as Announcements.

I wonder if this could be adapted to replace a Web Part Table - for something more colorful pleasing to the eye

BW

Wayne

@DRamalho92
The ImgHover doesnt work for me either

[UrbanCurry]

Here is my responsive adjustment (I hope this helps others) - works much better:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideColumnHeader": true,
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"min-width": "250px",
"max-width": "400px",
"padding-bottom": "20px",
"display": "=if([$RemoveDate] <= @now, 'none', '')"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "img",
"attributes": {
"src": "[$ImgHover]"
}
}
],
"style": {
"display": "=if([$ImgHover], '', 'none')",
"width": "100%",
"cursor": "pointer",
"font-size": "14px",
"padding": "14px",
"align-items": "stretch"
}
},
"openOnEvent": "hover",
"directionalHint": "leftCenter",
"isBeakVisible": false,
"beakStyle": {
"backgroundColor": "white"
}
},
"children": [
{
"elmType": "div",
"style": {
"border-radius": "8px",
"box-shadow": "#22 0px 1.6px 3.6px 0px, #22 0px 0.3px 0.9px 0px",
"display": "flex",
"font-size": "1rem",
"background-color": "=if([$TypeAnn] == 'Error', '#fdeded', if([$TypeAnn] == 'Success', '#edf7ed', if([$TypeAnn] == 'Warning', '#fff4e5', '#e5f6fd')))",
"line-height": "1.43",
"padding": "6px 16px",
"align-items": "center",
"flex-flow": "wrap"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if([$TypeAnn] == 'Error', 'ErrorBadge', if([$TypeAnn] == 'Success', 'Completed', if([$TypeAnn] == 'Warning', 'warning', 'info')))"
},
"style": {
"padding-right": "10px",
"font-weight": "700",
"color": "=if([$TypeAnn] == 'Error', '#ef5350', if([$TypeAnn] == 'Success', '#4caf50', if([$TypeAnn] == 'Warning', '#ff9800', '#03a9f4')))"
}
},
{
"txtContent": "[$Title]",
"elmType": "div",
"style": {
"font-weight": "700",
"margin-bottom": "0.35em"
}
},
{
"elmType": "div",
"txtContent": "[$Description]",
"style": {
"padding-left": "26px",
"flex-direction": "column"
}
}
]
}
]
}
}