From 41b38edde176f33c2b226aaceb06a12f5c04e758 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Mon, 5 Jun 2023 14:48:21 +0100 Subject: [PATCH 1/2] Added responsive CSS for broadcasts block list and grid views --- resources/frontend/css/broadcasts.css | 28 +++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/resources/frontend/css/broadcasts.css b/resources/frontend/css/broadcasts.css index 95c5e07ad..2d7abd05e 100644 --- a/resources/frontend/css/broadcasts.css +++ b/resources/frontend/css/broadcasts.css @@ -29,6 +29,16 @@ grid-template-columns: 150px auto; grid-column-gap: 20px; } +@media screen and (max-width: 478px) { + .convertkit-broadcasts-list li { + grid-template-areas: + "image image" + "date date" + "title title" + "text text"; + grid-row-gap: 10px; + } +} /** * Grid View. @@ -52,6 +62,16 @@ .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more { margin: 10px 0 0 0; } +@media screen and (max-width: 768px) { + .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list { + grid-template-columns: repeat(2, 1fr); + } +} +@media screen and (max-width: 478px) { + .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list { + grid-template-columns: repeat(1, 1fr); + } +} /** * Broadcast Item @@ -85,6 +105,12 @@ .convertkit-broadcasts-list li .convertkit-broadcast-read-more { display: block; } +@media screen and (max-width: 478px) { + /* @TODO Add horizontal line? */ + .convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li { + margin: 0 0 20px 0; + } +} /** * Pagination @@ -108,3 +134,5 @@ grid-area: next; text-align: right; } + + From 8c8ac06cf97b0ec03141ca290190726d2254a852 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Mon, 5 Jun 2023 14:49:42 +0100 Subject: [PATCH 2/2] Coding standards --- resources/frontend/css/broadcasts.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/resources/frontend/css/broadcasts.css b/resources/frontend/css/broadcasts.css index 2d7abd05e..dd5664e87 100644 --- a/resources/frontend/css/broadcasts.css +++ b/resources/frontend/css/broadcasts.css @@ -106,7 +106,6 @@ display: block; } @media screen and (max-width: 478px) { - /* @TODO Add horizontal line? */ .convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li { margin: 0 0 20px 0; } @@ -134,5 +133,3 @@ grid-area: next; text-align: right; } - -