From b2d96b65db416c45cd3c9950fd415f0031fed39a Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 01:20:53 -0500
Subject: [PATCH] use mobile class to set width
---
src/components/VizTitle.vue | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index e5345cf..2c44142 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -10,8 +10,7 @@
<div id="image-caption">
<p class="title"><strong>Unequal access to water</strong></p>
<p class="subtitle">
- How societal factors shape exposure to water-related hazards,<br />
- likelihood to suffer harm, and ability to cope and recover from losses
+ How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses
</p>
</div>
</div>
@@ -78,4 +77,12 @@ const mobileView = ref(isMobile);
padding: 1px 0 0 5px;
}
}
+
+#title-image.mobile {
+ width: 100vw; /* Ensure the image takes up the full width on mobile */
+}
+
+#intro-container.mobile {
+ padding: 1px 0 0 5px; /* Specific padding for mobile view */
+}
</style>
--
GitLab