Issue
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 class="page--darkmode">
<div class="content-container">
<div class="circle--darkmode">
<img class="circle-image" src="source" alt="Portrait of User">
</div>
<div class="logos">
<a href="https://www.linkedin.com/in/william-wei-0196a7209/">
<img class="logo-link" src="link" alt="Link to Linkedin">
</a>
<a href="https://github.com/weiwi21">
<img class="logo-link" src="link" alt="Link to github">
</a>
<a href="https://github.com/weiwi21/weiwi21.github.io/tree/master">
<img class="logo-link" 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
Solution
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 class="page--darkmode">
<div class="content-container">
<div class="circle--darkmode">
<img class="circle-image" src="source" alt="Portrait of User">
</div>
<div class="logos">
<a href="https://www.linkedin.com/in/william-wei-0196a7209/">
<img class="logo-link" src="link" alt="Link to Linkedin">
</a>
<a href="https://github.com/weiwi21">
<img class="logo-link" src="link" alt="Link to github">
</a>
<a href="https://github.com/weiwi21/weiwi21.github.io/tree/master">
<img class="logo-link" src="link" alt="Link to github">
</a>
</div>
</div>
</div>
Answered By - OndrejHj04
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.