To back previous styles and add max-height 200px to PoliticianImageDe…

…sktop
wevote · Nov 29, 2023 · 10f11ab · 10f11ab
1 parent e6af4f7
commit 10f11ab
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/js/common/components/Style/CampaignDetailsStyles.jsx b/src/js/common/components/Style/CampaignDetailsStyles.jsx
@@ -71,10 +71,10 @@ export const CampaignImageDesktopWrapper = styled('div')(({ theme }) => (`
     min-height: 174px;
   }
   ${theme.breakpoints.up('md')} {
-    min-height: 200px;
+    min-height: 239px;
   }
   ${theme.breakpoints.up('lg')} {
-    min-height: 200px;
+    min-height: 300px;
   }
 `));
 

diff --git a/src/js/common/components/Style/PoliticianDetailsStyles.jsx b/src/js/common/components/Style/PoliticianDetailsStyles.jsx
@@ -46,6 +46,7 @@ export const PoliticianImageMobile = styled('img')`
 export const PoliticianImageDesktop = styled('img')`
   border-radius: 5px;
   height: 100%;
+  max-height: 200px; // Needs to be revisited when rectangular campaign images are used
 `;
 
 export const PoliticianImageSharedStyles = css`
@@ -56,7 +57,7 @@ export const PoliticianImageSharedStyles = css`
 export const PoliticianImageDesktopPlaceholder = styled('div', {
   shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
 })(({ limitCardWidth }) => (`
-  ${limitCardWidth ? 'height: 200px;' : 'height: 117px;'}
+  ${limitCardWidth ? 'height: 315px;' : 'height: 117px;'}
   align-items: center;
   background-color: #eee;
   display: flex;
@@ -68,7 +69,7 @@ export const PoliticianImageDesktopPlaceholder = styled('div', {
 export const PoliticianImageMobilePlaceholder = styled('div', {
   shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
 })(({ limitCardWidth }) => (`
-  ${limitCardWidth ? 'height: 200px;' : 'height: 117px;'}
+  ${limitCardWidth ? 'height: 315px;' : 'height: 117px;'}
   align-items: center;
   background-color: #eee;
   display: flex;