From 7e4c9d59408149b877d019fcf728f5a50de8280e Mon Sep 17 00:00:00 2001
From: Sboonny <muhammed@freecodecamp.org>
Date: Sun, 19 Feb 2023 06:44:32 +0000
Subject: [PATCH] make the outline block

---
 .../components/profile/components/portfolio.css   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/components/profile/components/portfolio.css b/client/src/components/profile/components/portfolio.css
index 588fe9acd6d..3361b3bedcf 100644
--- a/client/src/components/profile/components/portfolio.css
+++ b/client/src/components/profile/components/portfolio.css
@@ -25,6 +25,10 @@
   grid-row: 2;
 }
 
+.portfolio-container a {
+  display: block;
+}
+
 .portfolio-container p {
   grid-column: 1/ -1;
   margin-inline-start: 0.5em;
@@ -40,7 +44,7 @@
 @media (min-width: 995px) {
   .portfolio-container {
     grid-template-rows: 0.1fr 1fr;
-    grid-template-columns: 300px repeat(2, 1fr);
+    grid-template-columns: 300px 1fr;
   }
 
   .portfolio-screen-shot {
@@ -49,12 +53,12 @@
   }
 
   .portfolio-container h3 {
-    grid-column: 2 / -1;
+    grid-column: 2;
     grid-row: 1;
   }
 
   .portfolio-container p {
-    grid-column: 2 / -1;
+    grid-column: 2;
     grid-row: 2;
   }
 }
@@ -72,8 +76,9 @@
   z-index: 1;
 }
 
-.portfolio-container a:hover,
-.portfolio-container a:focus {
+.portfolio-container a:is(:hover, :focus, :focus-visible) {
+  outline: 3px solid var(--blue-mid);
+  outline-offset: 1px;
   background-color: revert;
 }