Working on getting the table to display well on different screen sizes

src/app/elements/components/element-detail/element-detail.component.html

@@ -5,9 +5,20 @@ <h1 class="element-title">{{elementDetails.element}}</h1>
   <div class="back-button" (click)="goBack()"><img src="icons/back-arrow.svg" alt="Back"/></div>
   <div class="element-info">
     <div class="element-card {{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">
-      <p>{{elementDetails.atomicNumber}}</p>
+      <div class="element-header">
+        <p>{{elementDetails.atomicNumber}}</p>
+        <p>{{elementDetails.atomicWeight}}</p>
+      </div>
       <h2>{{elementDetails.symbol}}</h2>
+      <div class="element-footer">
+        <p>{{elementDetails.element}}</p>
+        <p>{{elementDetails.type}}</p>
+      </div>
     </div>
     <p>{{elementDetails.facts}}</p>
+    <div class="element-discovery">
+      <p>Discovered by <span>{{elementDetails.discoverer}}</span> in <span>{{elementDetails.yearOfDiscovery}}</span></p>
+
+    </div>
   </div>
 </div>

src/app/elements/components/element-detail/element-detail.component.scss

@@ -12,19 +12,45 @@
 }
 
 .element-info {
+  margin: auto;
+  width: 60vw;
+
   .element-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    padding: 10px;
     border-radius: 8px;
-    width: 10vw;
-    height: 10vw;
+    width: 15vw;
+    height: 15vw;
+
+    .element-header {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .element-footer {
+      display: flex;
+      gap: 8px;
+      padding-bottom:8px;
+      flex-direction: column;
+      text-align:center;
+    }
+
+    p {
+      margin: 0px;
+    }
 
     h2 {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
       font-size: 64px;
       font-weight: 400;
       text-align: center;
       margin: 0px;
     }
   }
-
-  margin: auto;
-  width: 60vw;
 }

src/app/elements/components/element/element.component.scss

@@ -1,4 +1,8 @@
 .element {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
   border-radius: 5px;
   margin: 2px;
   width: 5vw;
@@ -18,6 +22,10 @@
 
 .symbol {
   font-size: 32px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
   text-align:center;
   margin: 0px;
   font-weight: 400;
@@ -28,6 +36,52 @@
   text-align:center;
   margin: 0px;
   text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@media only screen and (max-width: 1500px) {
+  .symbol {
+    font-size: 24px;
+  }
+}
+
+@media only screen and (max-width: 1250px) {
+  .symbol {
+    font-size: 16px;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .symbol {
+    font-size: 20px;
+  }
+
+  .element-name {
+    display: none;
+  }
+
+  .atomic-number {
+    font-size: 10px;
+  }
+}
+
+@media only screen and (max-width: 900px) {
+  .atomic-number {
+    font-size: 8px;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .atomic-number {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .symbol {
+    font-size: 16px;
+  }
 }
 
 .nonmetal:hover {

src/app/elements/components/periodic-table/periodic-table.component.html

@@ -11,4 +11,9 @@ <h1 class="title">The Periodic Table Of Elements</h1>
   @for (element of elements; track element) {
       <element class="row-{{element.displayRow}} column-{{element.displayColumn}}" [element]="element"></element>
   }
+</div>
+
+<div class="rotate-device">
+  <img src="icons/beaker-loading.svg" alt="Beaker" />
+  <p>The elements are cool! But you'll be able to see them better if you rotate your device.</p>
 </div>

src/app/elements/components/periodic-table/periodic-table.component.scss

@@ -16,6 +16,23 @@
   }
 }
 
+.rotate-device {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  margin: 60% 20px;
+
+  img {
+    transform-origin: center bottom;
+    animation: wobble 1s infinite ease-in-out;
+    width: 100px;
+  }
+
+  p {
+    text-align: center;
+  }
+}
+
 @keyframes rotate-center {
   from {
     transform: rotate(0deg);
@@ -25,8 +42,15 @@
   }
 }
 
+@keyframes wobble {
+  0% { transform: rotate(0deg); }
+  25% { transform: rotate(-10deg); }
+  50% { transform: rotate(10deg); }
+  75% { transform: rotate(-5deg); }
+  100% { transform: rotate(0deg); }
+}
+
 .periodic-table {
-  margin: 2vw;
   display: grid;
 
   .column-1 {
@@ -136,4 +160,27 @@
   .row-9 {
     grid-row: 9;
   }
+}
+@media only screen and (max-width: 950px) {
+  .title {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .periodic-table {
+    display: none;
+  }
+
+  .title {
+    display: none;
+  }
+
+  .loading-table {
+    display: none;
+  }
+
+  .rotate-device {
+    display: flex;
+  }
 }