Make elements stop overlapping in flexbox-CodePudding

I have the image and the logos and the problem is that if I resize the window the logos end up overlapping the image of the portrait and I'm not too sure how I can set it up so that the logos are fixed relative to the portrait?

Here's the code.

/* Defaults for Main Part of Pages */

body,
div,
h1,
p {
  margin: 0;
  padding: 0;
}

.page {
  margin: 0;
  padding: 0;
  width: auto;
  height: 100vh;
}

.page--darkmode {
  margin: 0;
  padding: 0;
  width: auto;
  height: 100vh;
  background-color: #282434;
}


/* Homepage section */


/* Circle and Picture for homepage */

.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: space-evenly;
}

.circle {
  top: 20%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: absolute;
  box-shadow: 1px 1px 5px 2px rgb(155, 155, 155);
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle--darkmode {
  top: 20%;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  position: absolute;
  background-color: #282434;
  box-shadow: 1px 1px 5px 2px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.logos {
  width: 12rem;
  position: absolute;
  top: 55%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  width: 48px;
  height: 48px;
}

<div >
  <div >
    <div >
      <img  src="source" alt="Portrait of User">
    </div>
    <div >
      <a href="https://www.linkedin.com/in/william-wei-0196a7209/">
        <img  src="link" alt="Link to Linkedin">
      </a>
      <a href="https://github.com/weiwi21">
        <img  src="link" alt="Link to github">
      </a>
      <a href="https://github.com/weiwi21/weiwi21.github.io/tree/master">
        <img  src="link" alt="Link to github">
      </a>
    </div>
  </div>
</div>

I'm kind of hard coding a lot of the relative positioning and it isn't really friendly for window resizing so I'm not too sure which changes I should make

CodePudding user response：

For such a simple layout there are a plenty of unnecessary stylings. However removing the absolute position for the circle and logos does stop the overflowing, but causes new problems with responsivity. Also thats not a big deal, you just have to change the hard-coded size of the circle to something responsive.

body,
div,
h1,
p {
  margin: 0;
  padding: 0;
}

.page {
  margin: 0;
  padding: 0;
  width: auto;
  height: 100vh;
}

.page--darkmode {
  margin: 0;
  padding: 0;
  width: auto;
  height: 100vh;
  background-color: #282434;
}


/* Homepage section */


/* Circle and Picture for homepage */

.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.circle {
  top: 20%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: absolute;
  box-shadow: 1px 1px 5px 2px rgb(155, 155, 155);
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle--darkmode {
  top: 20%;
  /* hard-coded
     height: 250px;
     width: 250px; */
  height: calc(10vh   10vw   30px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #282434;
  box-shadow: 1px 1px 5px 2px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.logos {
  width: 12rem;
  top: 55%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  width: 48px;
  height: 48px;
}

<div >
  <div >
    <div >
      <img  src="source" alt="Portrait of User">
    </div>
    <div >
      <a href="https://www.linkedin.com/in/william-wei-0196a7209/">
        <img  src="link" alt="Link to Linkedin">
      </a>
      <a href="https://github.com/weiwi21">
        <img  src="link" alt="Link to github">
      </a>
      <a href="https://github.com/weiwi21/weiwi21.github.io/tree/master">
        <img  src="link" alt="Link to github">
      </a>
    </div>
  </div>
</div>