Merge pull request #763 from jonfroehlich/long-photo-captions-get-cutoff

Long photo captions get cutoff
makeabilitylab · Feb 3, 2019 · 5da2642 · 5da2642
2 parents 2e88e23 + 8cc8106
commit 5da2642
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/website/static/website/css/project.css b/website/static/website/css/project.css
@@ -57,7 +57,7 @@
 }
 
 .header-visual-title {
-    	font-family: adelle-regular;
+    font-family: adelle-regular;
 	font-weight: bold;
 	color: #464D59;
 	font-size: 15px;
@@ -94,21 +94,23 @@
     margin: auto;
     position: absolute;
     background: rgba(50, 50, 50, .7);
-    display: table-cell;
-    vertical-align: middle;
     opacity:0;
+    line-height: 250px;
+    text-align:center;
 }
 
 .image-gallery-caption {
     color:white;
     weight:bold;
-    font-size:2em;
-    padding:10px;
-    padding-top:25%;
-    text-align:center;
+    font-size:1.8rem;
+    line-height: 1.5;
+    display: inline-block;
     vertical-align: middle;
+    padding-left: 5%;
+    padding-right:5%;
 }
 
+
 .video-column, .talk-column {
     padding-left: 0;
     padding-right: 30px;

diff --git a/website/templates/website/project.html b/website/templates/website/project.html
@@ -185,7 +185,7 @@ <h3 class="news-type-label">Photo Gallery</h3>
             <div class="col-md-4 project-gallery-col">
             <img src="{% thumbnail image.picture 368x245 box=image.cropping crop detail %}" alt="{{image.alt_text}}" class="project-gallery">
             <div class="overlay-image">
-                <p class="image-gallery-caption">{{image.caption}}</p>
+                <div class="image-gallery-caption">{{image.caption}}</div>
             </div>
             </div>
             {% endfor %}