Search code examples
htmlcssreactjsresponsive-designfigma

React JS floated tag around a component, is position absolute a prudent idea?

I would like to get involved in something perhaps complicated. I would like to create the following render (see image below) with React JS. However, I thought it would be prudent to begin by using position: absolute and repositioning my divs accordingly. However, it appears to be a difficult idea at first glance, considering the number of tags I desire (floated around the main component) for the responsive aspect and the sake that moving them with some pixel will be an indefinitely task. As a result, I was wondering whether there is a plug-in or if you have any suggestions for resolving this particular aspect. Additionally, remember that if you like to respond, it is OK to do so using basic coloured square-rectangles; I am looking forward to learning how to apply such a thing not the specific design.

Today, I have the following, but it would be unmanageable to perform this for each and hope for the best during responsive resizing.

My current code:

React JS divs:

profile_picture = () => {
return (
  <div className="profilepicturetechstack">
    <div className="home">
      <div className="frame-1-3">
        <img src="./resources/simon-provost-02-min.jpg"  alt="profile_pic"/>
      </div>
      <div className="photo--wrapper--ellipse">
        <p className="text-4">ML/RESEARCH</p>
      </div>
      <p className="text-1">Simon provost</p>
      <p className="text-2">Paris, France</p>
    </div>
    <div className="frame-1-4">
      <p className="text-7">⚙️ Machine Learning</p>
    </div>
    {/*<div className="frame-1-9">
      <p className="text-8">💡 AutoML</p>
    </div>
    <div className="frame-1-5">
      <p className="text-9">⛏ Data Mining</p>
    </div>
    <div className="frame-1-6">
      <p className="text-1-0">🎨  UI.UX</p>
    </div>
    <div className="frame-1-8">
      <p className="text-1-1">🔬 Research</p>
    </div>
    <div className="frame-1-2">
      <img src="" />
    </div>
    <div className="frame-1-7">
      <p className="text-1-3">🌤  MLOps</p>
    </div>*/}
  </div>
)

}

CSS associated class:

.profilepicturetechstack {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-right: 10%;
}
.home {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 100px;

  border-radius: 13px;
  height: 300px;
  width: 350px;
  background-color: #ffffff;
  box-shadow: 0 40px 30px rgba(25, 25, 46, 0.06);
}
.text-1 {
  text-align: center;
  vertical-align: top;
  font-size: 16px;
  font-family: Roboto, serif;

  color: #25323c;
}
.text-2 {
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  margin-top: -15px;
  font-family: Roboto, serif;

  color: #859fb3;
}
.photo--wrapper--ellipse {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -15px;
  width: 96px;
  height: 25px;

  background: linear-gradient(135deg, #FF26B2 0%, #851BD9 80%, #3F0FFF 100%);
  opacity: 0.8;
  box-shadow: 0 5px 20px rgba(250, 118, 96, 0.2);
  border-radius: 66px;
}
.img-3 {
  height: 84px;
  width: 84px;
}
.component-/points-/-m {
  opacity: 0.80;
  border-radius: 66px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 10px;
  gap: 7px;
  background-color: red;
}
.text-4 {
  text-align: center;
  vertical-align: top;
  font-size: 11px;
  font-family: Roboto, serif;

  color: #ffffff;
}
.frame-1-3 {
  height: 120px;
  width: 120px;
}

.frame-1-3 img {
  object-fit: contain;
  border-radius: 62px;
  height: 100%;
  width: 100%;
}

.frame-1-1 {
  border-radius: 25px;
  height: 61px;
  width: 61px;
  background-color: rgba(36, 150, 237, 0.5);
}
.img-6 {
  height: 35px;
  width: 37px;
}
.frame-1-4 {
  display: flex;
  position: absolute;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  right: 5%;
  box-shadow: 0 40px 30px rgba(25, 25, 46, 0.04);
  border-radius: 16px;
  background-color: #ffffff;
}
.text-7 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-9 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-8 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-5 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-9 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-6 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-1-0 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-8 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-1-1 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-2 {
  border-radius: 25px;
  height: 61px;
  width: 61px;
  background-color: #f3eefa;
}
.img-1-2 {
  height: 29px;
  width: 29px;
}
.frame-1-7 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-1-3 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}

I am open to learning more about tips and best practises; you may remove my code and provide a solution that focuses on the purpose rather than the particular design once again; that is fine. I am a little befuddled. Many thanks.

Figma screenshot I wish to be able to reproduce: Figma-design, note I could share the link to the Figma if needed

Solution

  • As Ramesh mentioned in the comments, absolute positioning is needed for the list items surrounding the main div.

    • Create a container div surrounding the list items and have the width and height dimensions the same as className home. This will ensure that the list items will not be affected by flexbox.
    • I would remove all flex containers inside the classNames for the list items. Instead, use position: absolute in order to use right, left, bottom, and top properties. From here, you can test different values using percentages or pixels to get the placements you wish for. For more information regarding using either pixels or percentages, this article helps with clarifying this: https://www.hongkiat.com/blog/css-units/
    • As for responsive resizing: Use media queries. It is also important to use the !important property as it would give more weight to the appropriate value needed based on the screen size. For more information on media queries, visit https://css-tricks.com/a-complete-guide-to-css-media-queries/

    One of the list items for responsive resizing should look something like this:

    .frame-1-6 {  
     position: absolute;
     padding: 16px 24px;
     left: -200px; //Over 900px
     bottom: 115%; //Over 900px
     border: 1px solid black;
     width: 200px;
     box-shadow: 0 40px 30px rgba(25, 25, 46, 0.04);
     border-radius: 16px;
     background-color: #ffffff;
 }

 @media screen and (max-width: 900px) {
     .frame-1-6 {
       left: -150px !important; //Under 900px
       bottom: 100% !important; //Under 900px
     }
 }

    In the live example, I have gone ahead and placed some of your list items in the desired areas in order to showcase how it works.

    Live Example: https://jsfiddle.net/t3qry2oa/286/