How can I add a space in mobile?-CodePudding

I have created this responsive code that allows for an image and shape transformation once you hover on top of the square. The issue relies upon the mobile version. As shown in my codepen example, when the two square images are in mobile response, they touch each other and I would love any advice or tips on how to prevent that or how to add a space for the mobile version. Here is my codepen

#mem:hover {
    content: url('https://lh3.googleusercontent.com/-skSKXMT0rCzdJLU13X31Y4lb-qF6WWgqDMAOOsplp-xtbDLhVU5XjcDMIsVChUQJUdM5gTCXEXusFqxtTqjWL9SnnsU_yDcVAROFiiFadZQ8cIqi_1XTvYnSpcRHAxjGOJjBQ1r_g=w2400');
}

#mem2:hover {
    content: url('https://lh3.googleusercontent.com/dbaVcrH1yuKkm_8BlnluKD0UTAfDm1VngB3_fJH7EeFAutr0SulReO9es3Cqhras-5ufZP91dpSuPVDG3r2b37rg5ZX6998NQVxTJiEiVzriCMpTffTc_Zi09yRTBGc9tabwe4absA=w2400');
}

.header {
  padding: 60px;
  text-align: center;
  color: black;
  font-size: 60px;
}

/* Website mobile response */
@media all and (max-width: 800px) {
  .main{
    /* On small screens, we are no longer using row direction but column */
     display: flex;
  flex-direction: column;
  width: 300px;
  
  flex-shrink: 3; /* default 1 */
 
}

#profile-card{
  flex-shrink: 3; /* default 1 */
  order: 3; /* default is 0 */
}
  }

<!DOCTYPE html>
<html lang="en">
  
  
<!--  Design by gyonarice.com -->
  
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
  <!--  code begins style section -->
 
  <div class="header">
  <h1>Header</h1>

</div>
  <style media="screen">

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Exo;
   }
   @font-face {
     font-family: Exo;
     src: url(./fonts/Exo2.0-Medium.otf);
   }
   .main{
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
   }
    p.big {
  line-height: 1.8;
}
    
   .profile-card{
     position: relative;
     font-family: sans-serif;
     width: 440px;
     height: 440px;
     background: #ef3e2f;
     padding: 20px;
     border-radius: 10%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
     margin: 0 25px;
   }
   .profile-card:hover{
     border-radius: 10px;
     height: 460px;
     width:  460px;
   }
   .profile-card .img{
     position: relative;
     width: 100%;
     height: 100%;
     transition: .6s;
     z-index: 59;
   }
   .profile-card:hover .img{
     transform: translateY(-290px);
   }
   .img img{
     width: 100%;
     border-radius: 10%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
   }
   .profile-card:hover img{
     border-radius: 10px;
   }
   .caption{
     text-align: center;
     transform: translateY(-290px);
     opacity: 0;
     transition: .6s;
   }
   .profile-card:hover .caption{
     opacity: 1;
   }
  
     .caption h1{
     font-size: 36px;
     font-family: sans-serif;
      color: white;
   }
    .caption h3{
     font-size: 21px;
     font-family: sans-serif;
      color: white;
   }
   .caption p{
     font-size: 14px;
     color: white;
     font-family: sans-serif;
     margin: 2px 0 9px 0;
   }
   .caption .social-links a{
     color: #333;
     margin-right: 15px;
     font-size: 21px;
     transition: .6s;
   }
   .social-links a:hover{
     color: #0c52a1;
   }
 /* Website mobile response */
@media all and (max-width: 800px) {
  .main{
    /* On small screens, we are no longer using row direction but column */
     display: flex;
  flex-direction: column;
  flex-shrink: 3; /* default 1 */
 
}
    
  </style>

</head>

<body>
    <div class="main">
        <div class="profile-card">
            <div class="img">
                <img id="mem" src="https://lh3.googleusercontent.com/3kqNTl69nVvAjuyYHZpNKLxgzjBk54G85tJyNUVMqK2JBYpcOTYHlBJnqw5brWHnVUaXXEWI2rjllmStYa9JTpFp4CPGUPetX3lcAr9i5Mo2at-Y_X_LZl1x32_0_JKmKJDzcQSBpA=w2400">
            </div>
            <div class="caption">
                <h1>Iuliana Keyes</h1>
                <h3>Financial Advisor</h3>
          
              <P>
                 <br></p>
                  <p class="big">Iuliana Keyes joined Thomas Financial Group in February 2004 and became a partner in 2014. Her expertise is in helping individuals, families and small businesses with investment management, retirement needs, college planning and wealth transfer. She believes that the best way to address planning challenges is by setting a destination or a desired outcome and finding the most suitable path to get there. </p>
                <div class="social-links">
                    
                </div>
            </div>
        </div>
        <div class="profile-card">
            <div class="img">
                <img id="mem2"src="https://lh3.googleusercontent.com/6ea-M6G5jek10ys6NfB_Ne6dtdNam2txbGRjc526sTHJGdXq81rC7mSNkTc4cQraQFHA5XjzlySGJtWpSTTWmvkQOTjHircU1du5I4kWC45iJcF_DXM30ceX_w0w2IA8lmjall-iYg=w2400">
            </div>
            <div class="caption">
                <h1>Elizabeth Cacaj</h1>
                <h3>Front End Developer</h3>
               <P>
                 <br></p>
                  <p class="big">
                    Elizabeth is our non-registered Financial Services Assistant who joined us in October 2018. She obtained her BBA from Rochester College, and is a Notary Public. When she isn’t assisting clients, or keeping our office agenda in check, she is creating memories with her son and husband. Elizabeth gets inspired by cooking shows, appreciates a chilling ghost story, and thrives on soul-fulfilling adventures.<p>
                   
            </div>
        </div>
    

</body>

</html>

CodePudding user response：

I would say the simplest solution would be to keep your flex-direction: row; instead of column on your media-queries.

Assuming you want to keep the flex-direction: column; for a mobile-friendly feel. You can add another class to your second .profile-card. In this example, I added a class called slide-up. You can then set a hover effect on that class with some margin to make space for the photo. I added margin-top to your new class slide-up in the media queries since this issue is only relevant on a media screen.

Please see the additions.

#mem:hover {
    content: url('https://lh3.googleusercontent.com/-skSKXMT0rCzdJLU13X31Y4lb-qF6WWgqDMAOOsplp-xtbDLhVU5XjcDMIsVChUQJUdM5gTCXEXusFqxtTqjWL9SnnsU_yDcVAROFiiFadZQ8cIqi_1XTvYnSpcRHAxjGOJjBQ1r_g=w2400');
}

#mem2:hover {
    content: url('https://lh3.googleusercontent.com/dbaVcrH1yuKkm_8BlnluKD0UTAfDm1VngB3_fJH7EeFAutr0SulReO9es3Cqhras-5ufZP91dpSuPVDG3r2b37rg5ZX6998NQVxTJiEiVzriCMpTffTc_Zi09yRTBGc9tabwe4absA=w2400');
}

.header {
  padding: 60px;
  text-align: center;
  color: black;
  font-size: 60px;
}

/* Website mobile response */
@media all and (max-width: 800px) {
  .main{
    /* On small screens, we are no longer using row direction but column */
     display: flex;
  flex-direction: column;
  width: 300px;
  
  flex-shrink: 3; /* default 1 */
 
}

#profile-card{
  flex-shrink: 3; /* default 1 */
  order: 3; /* default is 0 */
}

.slide-up:hover {
  margin-top: 17rem;
}
  }

<!DOCTYPE html>
<html lang="en">
  
  
<!--  Design by gyonarice.com -->
  
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
  <!--  code begins style section -->
 
  <div class="header">
  <h1>Header</h1>

</div>
  <style media="screen">

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Exo;
   }
   @font-face {
     font-family: Exo;
     src: url(./fonts/Exo2.0-Medium.otf);
   }
   .main{
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
   }
    p.big {
  line-height: 1.8;
}
    
   .profile-card{
     position: relative;
     font-family: sans-serif;
     width: 440px;
     height: 440px;
     background: #ef3e2f;
     padding: 20px;
     border-radius: 10%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
     margin: 0 25px;
   }
   .profile-card:hover{
     border-radius: 10px;
     height: 460px;
     width:  460px;
   }
   .profile-card .img{
     position: relative;
     width: 100%;
     height: 100%;
     transition: .6s;
     z-index: 59;
   }
   .profile-card:hover .img{
     transform: translateY(-290px);
   }
   .img img{
     width: 100%;
     border-radius: 10%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
   }
   .profile-card:hover img{
     border-radius: 10px;
   }
   .caption{
     text-align: center;
     transform: translateY(-290px);
     opacity: 0;
     transition: .6s;
   }
   .profile-card:hover .caption{
     opacity: 1;
   }
  
     .caption h1{
     font-size: 36px;
     font-family: sans-serif;
      color: white;
   }
    .caption h3{
     font-size: 21px;
     font-family: sans-serif;
      color: white;
   }
   .caption p{
     font-size: 14px;
     color: white;
     font-family: sans-serif;
     margin: 2px 0 9px 0;
   }
   .caption .social-links a{
     color: #333;
     margin-right: 15px;
     font-size: 21px;
     transition: .6s;
   }
   .social-links a:hover{
     color: #0c52a1;
   }
 /* Website mobile response */
@media all and (max-width: 800px) {
  .main{
    /* On small screens, we are no longer using row direction but column */
     display: flex;
  flex-direction: column;
  flex-shrink: 3; /* default 1 */
 
}
    
  </style>

</head>

<body>
    <div class="main">
        <div class="profile-card">
            <div class="img">
                <img id="mem" src="https://lh3.googleusercontent.com/3kqNTl69nVvAjuyYHZpNKLxgzjBk54G85tJyNUVMqK2JBYpcOTYHlBJnqw5brWHnVUaXXEWI2rjllmStYa9JTpFp4CPGUPetX3lcAr9i5Mo2at-Y_X_LZl1x32_0_JKmKJDzcQSBpA=w2400">
            </div>
            <div class="caption">
                <h1>Iuliana Keyes</h1>
                <h3>Financial Advisor</h3>
          
              <P>
                 <br></p>
                  <p class="big">Iuliana Keyes joined Thomas Financial Group in February 2004 and became a partner in 2014. Her expertise is in helping individuals, families and small businesses with investment management, retirement needs, college planning and wealth transfer. She believes that the best way to address planning challenges is by setting a destination or a desired outcome and finding the most suitable path to get there. </p>
                <div class="social-links">
                    
                </div>
            </div>
        </div>
        <div class="profile-card slide-up">
            <div class="img">
                <img id="mem2"src="https://lh3.googleusercontent.com/6ea-M6G5jek10ys6NfB_Ne6dtdNam2txbGRjc526sTHJGdXq81rC7mSNkTc4cQraQFHA5XjzlySGJtWpSTTWmvkQOTjHircU1du5I4kWC45iJcF_DXM30ceX_w0w2IA8lmjall-iYg=w2400">
            </div>
            <div class="caption">
                <h1>Elizabeth Cacaj</h1>
                <h3>Front End Developer</h3>
               <P>
                 <br></p>
                  <p class="big">
                    Elizabeth is our non-registered Financial Services Assistant who joined us in October 2018. She obtained her BBA from Rochester College, and is a Notary Public. When she isn’t assisting clients, or keeping our office agenda in check, she is creating memories with her son and husband. Elizabeth gets inspired by cooking shows, appreciates a chilling ghost story, and thrives on soul-fulfilling adventures.<p>
                   
            </div>
        </div>
    

</body>

</html>

CodePudding user response：

In your HTML file, you gave margin:0,25px; property for your profie-card class instead of that you can give

.profile-card{
     margin:1rem;
}

#mem:hover {
    content: url('https://lh3.googleusercontent.com/-skSKXMT0rCzdJLU13X31Y4lb-qF6WWgqDMAOOsplp-xtbDLhVU5XjcDMIsVChUQJUdM5gTCXEXusFqxtTqjWL9SnnsU_yDcVAROFiiFadZQ8cIqi_1XTvYnSpcRHAxjGOJjBQ1r_g=w2400');
}

#mem2:hover {
    content: url('https://lh3.googleusercontent.com/dbaVcrH1yuKkm_8BlnluKD0UTAfDm1VngB3_fJH7EeFAutr0SulReO9es3Cqhras-5ufZP91dpSuPVDG3r2b37rg5ZX6998NQVxTJiEiVzriCMpTffTc_Zi09yRTBGc9tabwe4absA=w2400');
}

.header {
  padding-top: 40px;
  padding-bottom:60px;
  text-align: center;
  color: black;
  font-size: 40px;
  margin:2rem;
}

/* Website mobile response */
@media all and (max-width: 800px) {
  .main{
    /* On small screens, we are no longer using row direction but column */
     display: flex;
  flex-direction: column;
  width: 300px;
  flex-shrink: 3; /* default 1 */
}
  
#profile-card{
  flex-shrink: 3; /* default 1 */
  order: 3; /* default is 0 */
}
  }

<!DOCTYPE html>
<html lang="en">
  
  
<!--  Design by gyonarice.com -->
  
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
  <!--  code begins style section -->
 
  <div class="header">
  <h1>Header</h1>

</div>
  <style media="screen">

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Exo;
   }
   @font-face {
     font-family: Exo;
     src: url(./fonts/Exo2.0-Medium.otf);
   }
   .main{
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
   }
    p.big {
  line-height: 1.8;
}
    
   .profile-card{
     position: relative;
     font-family: sans-serif;
     width: 400px;
     height: 400px;
     background: #ef3e2f;
     padding: 20px;
      margin:1rem;
     border-radius: 10%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
     
   }
   .profile-card:hover{
     border-radius: 10px;
     height: 460px;
     width:  460px;
   }
   .profile-card .img{
     position: relative;
     width: 100%;
     height: 100%;
     transition: .6s;
     z-index: 59;
   }
   .profile-card:hover .img{
     transform: translateY(-290px);
   }
   .img img{
     width: 100%;
     border-radius: 10%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
   }
   .profile-card:hover img{
     border-radius: 10px;
   }
   .caption{
     text-align: center;
     transform: translateY(-290px);
     opacity: 0;
     transition: .6s;
   }
   .profile-card:hover .caption{
     opacity: 1;
   }
  
     .caption h1{
     font-size: 36px;
     font-family: sans-serif;
      color: white;
   }
    .caption h3{
     font-size: 21px;
     font-family: sans-serif;
      color: white;
   }
   .caption p{
     font-size: 14px;
     color: white;
     font-family: sans-serif;
     margin: 2px 0 9px 0;
   }
   .caption .social-links a{
     color: #333;
     margin-right: 15px;
     font-size: 21px;
     transition: .6s;
   }
   .social-links a:hover{
     color: #0c52a1;
   }
 /* Website mobile response */
@media all and (max-width: 800px) {
  .main{
    /* On small screens, we are no longer using row direction but column */
     display: flex;
  flex-direction: column;
  flex-shrink: 3; /* default 1 */
 
}
    
  </style>

</head>

<body>
    <div class="main">
        <div class="profile-card">
            <div class="img">
                <img id="mem" src="https://lh3.googleusercontent.com/3kqNTl69nVvAjuyYHZpNKLxgzjBk54G85tJyNUVMqK2JBYpcOTYHlBJnqw5brWHnVUaXXEWI2rjllmStYa9JTpFp4CPGUPetX3lcAr9i5Mo2at-Y_X_LZl1x32_0_JKmKJDzcQSBpA=w2400">
            </div>
            <div class="caption">
                <h1>Iuliana Keyes</h1>
                <h3>Financial Advisor</h3>
          
              <P>
                 <br></p>
                  <p class="big">Iuliana Keyes joined Thomas Financial Group in February 2004 and became a partner in 2014. Her expertise is in helping individuals, families and small businesses with investment management, retirement needs, college planning and wealth transfer. She believes that the best way to address planning challenges is by setting a destination or a desired outcome and finding the most suitable path to get there. </p>
                <div class="social-links">
                    
                </div>
            </div>
        </div>
        <div class="profile-card">
            <div class="img">
                <img id="mem2"src="https://lh3.googleusercontent.com/6ea-M6G5jek10ys6NfB_Ne6dtdNam2txbGRjc526sTHJGdXq81rC7mSNkTc4cQraQFHA5XjzlySGJtWpSTTWmvkQOTjHircU1du5I4kWC45iJcF_DXM30ceX_w0w2IA8lmjall-iYg=w2400">
            </div>
            <div class="caption">
                <h1>Elizabeth Cacaj</h1>
                <h3>Front End Developer</h3>
               <P>
                 <br></p>
                  <p class="big">
                    Elizabeth is our non-registered Financial Services Assistant who joined us in October 2018. She obtained her BBA from Rochester College, and is a Notary Public. When she isn’t assisting clients, or keeping our office agenda in check, she is creating memories with her son and husband. Elizabeth gets inspired by cooking shows, appreciates a chilling ghost story, and thrives on soul-fulfilling adventures.<p>
                   
            </div>
        </div>
    

</body>

</html>