diff --git a/_includes/citizen-engagement-cards.html b/_includes/citizen-engagement-cards.html
index fab1e3a7dc..c6b5361567 100644
--- a/_includes/citizen-engagement-cards.html
+++ b/_includes/citizen-engagement-cards.html
@@ -1,6 +1,14 @@
{% assign visible_projects = site.projects | where: "program-area", "Citizen Engagement" | where: "visible", "true" %}
{% for item in visible_projects %}
-
+ {%- if
+ item.problem.size > 0 and
+ item.solution.size > 0 and
+ item.impact.size > 0 and
+ item.sdg.size > 0 and
+ item.card-image-src.size > 0 and
+ item.sdg-image-src.size > 0
+ -%}
+
@@ -21,14 +29,23 @@
Solution
Impact
{{ item.impact }}
-
-
-
-
Sustainable Development Goal
-
-
-
{{ item.sdg }}
-
-
+
+
+
+
+ {% assign project_relative_path = item.slug | prepend: "../projects/" %}
+
+
We are currently drafting the Problem, Solution and Impact statements for this project.
+
- {% endfor %}
+ {%- endif -%}
+ {% endfor %}
\ No newline at end of file
diff --git a/_sass/components/_citizen_engagement.scss b/_sass/components/_citizen_engagement.scss
index 8958924db5..6a1f1947af 100644
--- a/_sass/components/_citizen_engagement.scss
+++ b/_sass/components/_citizen_engagement.scss
@@ -28,7 +28,9 @@
//This is the default styling for the cards when they are in mobile view.
//project-dropdown and sustainable-dev-goal are defaulted to display:none until given the "activated" class attribute
-.program-area {
+
+.program-area,
+.missing-area {
.mobile-card-info-container {
display: flex;
flex-direction: column;
@@ -58,6 +60,20 @@
}
}
+.missing-area {
+ .mobile-card-info-container {
+ align-items: center;
+
+ h3 {
+ margin-bottom: 10px;
+ color: $color-red;
+ }
+ p {
+ text-align: center;
+ }
+ }
+}
+
.organizations {
padding: 44px;
display: flex;
@@ -145,7 +161,8 @@
//The styling for the card is column based until we reach desktop width
@media #{$bp-mobile-up} {
- .program-area {
+ .program-area,
+ .missing-area {
display: flex;
padding: 44px;
flex-direction: column;
@@ -215,6 +232,14 @@
max-width: 1080px !important;
}
+ .missing-area {
+ padding: 44px;
+ max-width: 1080px;
+ .mobile-card-info-container {
+ padding: 0px;
+ }
+ }
+
.program-area {
display: grid;
grid-template-columns: 1fr 1fr;