Agent profile css changes

hlxsites · May 24, 2024 · 6e1501d · 6e1501d
1 parent bb3015e
commit 6e1501d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/blocks/agent-profile/agent-profile.css b/blocks/agent-profile/agent-profile.css
@@ -3,13 +3,18 @@
   padding: 0 1rem;
 }
 
+main .section.agent-profile-container .agent-profile-wrapper {
+  word-break: break-word;
+}
+
 .agent-profile.block .profile-image img {
   width: 9.375rem;
   height: 11.875rem;
 }
 
 .agent-profile.block .profile-content .contact-me {
-    margin-top: 1.5rem;
+  margin-top: 1.5rem;
+  display: none;
 }
 
 .agent-profile.block .profile-content {
@@ -45,6 +50,7 @@
   font-size: var(--body-font-size-xs);
   color: var(--black);
   text-transform: lowercase;
+  word-wrap: break-word;
 }
 
 .agent-profile.block .profile-content .contact-me a {
@@ -75,6 +81,12 @@
   margin-bottom: 0.25rem;
 }
 
+@media (min-width: 600px) {
+  .agent-profile.block .profile-content .contact-me {
+    display: block;
+  }
+}
+
 @media (min-width: 1200px) {
   main .section.agent-profile-container {
     position: relative;
@@ -89,7 +101,6 @@
     bottom: 4.625rem;
     padding: 1.875rem 1.875rem 0;
     z-index: 1;
-    word-break: break-word;
     background-color: var(--white);
   }
 

diff --git a/blocks/agent-profile/agent-profile.js b/blocks/agent-profile/agent-profile.js
@@ -53,7 +53,7 @@ const getEmailDiv = () => {
 
 const getImageDiv = () => {
   const agentPhoto = getMetadata('photo');
-  return div({ class: 'profile-image' }, img({ src: agentPhoto }));
+  return div({ class: 'profile-image' }, img({ src: agentPhoto, alt: getMetadata('name'), loading: 'lazy' }));
 };
 
 const getSocialDiv = () => {