Prevent elements from overlapping within a flexbox container

I've encountered an issue with resizing the window causing the logos to overlap the portrait image. Is there a way to fix the logos relative to the portrait?

Below is 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>

The current method involves hard-coding a lot of relative positioning, making it unfriendly for window resizing. Any suggestions on the necessary changes to address this issue?

htmlcss

Answer №1

Despite the simplicity of the layout, there seems to be an abundance of unnecessary stylings. However, if you remove the absolute positioning for the circle and logos, it solves the overflow issue but introduces new problems with responsivity. This can easily be rectified by adjusting the hard-coded size of the circle to make it 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive Navigation Bar in JavaScript

Is there a way to create a horizontal menu with an arrow that follows the mouse cursor? I saw this effect on a website (http://cartubank.ge) and I'm curious if anyone has the source code for it? Your help would be greatly appreciated. ...

javascripthtmlcssdhtml

Various text sizes within a nested HTML list structure

I've developed a nested CSS class for an ordered list on my website, but I'm encountering a problem where each list item is appearing in different font sizes even though I have specified the font size. .number_list ol { font:normal 1.2em ...

htmlcsshtml-lists

Is the navbar-nav being unexpectedly placed below the navbar-brand?

As my screen width decreases to 767px, the navigation collapses as expected. However, at 768px, the navbar-nav drops below the navbar-brand until reaching 795px where they realign again. These values may vary based on the size of your navigation. Check o ...

htmlcsstwitter-bootstrap-3

Customizing Your Keyboard Design with CSS

I need assistance in creating a compact and dynamic keyboard layout with characters only, but I have hit a roadblock. Here is the link to my current progress: http://jsfiddle.net/45zDd The design is almost complete, however, the second and third rows req ...

htmlcss

How to toggle two classes simultaneously using JQuery

Check out this code snippet: http://jsfiddle.net/celiostat/NCPv9/ Utilizing the 2 jQuery plugin allows for the following changes to be made: - The background color of the div can be set to gray. - The text color can be changed to red. The issue arises wh ...

javascriptjqueryhtmlcss

How come the h2::after element is positioned directly beneath the main h2 element, and with a margin-bottom?

I'm puzzled as to why the margin-bottom property in the main h2 element isn't affecting its "::after" element. Both are defined as block elements, so one margin should provide enough space between them. Even though the "h2::after" element has 0 m ...

htmlcss

html transparent div element

I'm encountering an issue with this specific code snippet: <li class="nav-item dropdown" id="noti_Container" > <div id="noti_Counter" style="opacity: 1; top: -2px;"></div> <a style=" ...

htmlcssopacitytransparent

Fill input text fields with values based on dropdown selection and start with 2 input fields pre-filled

Initially, the issue is that there are 2 input text fields displayed. Depending on the selection from a drop-down menu ranging from 2 to 6, additional input fields should be added or removed. Here's my code: function addElements(selectElement) { va ...

javascripthtml

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

The replaceWith function in jQuery does not support <script> elements

I am faced with a situation where my AJAX response includes HTML code, including <script> elements. My goal is to replace an existing element with this HTML content. However, when I attempt to do so using the following code: $(element).replaceWith( ...

jqueryhtmlajaxreplacewith

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

// Custom Cart Code for Database Quantity Update $('.input-text').on('keydown ' , function(){ var tr_parent = $(this).closest("tr"); setTimeout(function () { $(tr_parent).css('opacity', '0.3'); }, 4000); var i ...

javascriptjquerycssajax

Move the width from left to right with animation

Currently, I am exploring ways to use jQuery to create an animation effect on a div where the width shrinks from left to right. My first step is to have the element animate as follows: Slide in from left to right Then continue moving to the right off th ...

jquerycss

The horizontal display of JqueryMobile radiobuttons is not appearing correctly

My aim is to dynamically generate a set of radio buttons using JQueryMobile. Everything seems to be working fine except for the data-type='horizontal' attribute: On looking at this fiddle, you'll notice that the "created-via-js" radio group ...

jqueryhtmljquery-mobileradio-button

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

htmlcssresponsive-designcss-grid

What is the best method to modify and access imported .css files within the WordPress style.css file?

I could use some assistance with a project involving minor edits to a WordPress website. I've hit a roadblock and need some help. The style.css file in WordPress doesn't have much CSS code, but instead imports files like this: /*Animate*/ @impo ...

csswordpresstwitter-bootstrap

Learn how to create a PHP activity feed that functions like Facebook, and discover the best methods for converting JSON responses into HTML

We are currently working on a website that functions similarly to Facebook, specifically focusing on the activity feed. To load the user's activity feed, we use AJAX to send a request to a PHP file which then processes the logic and returns the values ...

phpfacebookjsonhtmlfeed

Building a multi-form application with HTML5 validation and Vue.js

I am working on a vue.js form that consists of multiple steps and requires HTML5 validation to be simplified. Here is a snippet of the code: <template> <div> <div v-if="activeForm === 1"> <h2> ...

javascripthtmlvalidationvue.js

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

Firefox experiencing issues with loading background images

The website URL: 4genderjustice.org While this layout functions properly in most browsers, notably Firefox seems to be causing issues. The question remains: why is it not functioning as expected in Firefox? The background images are configured like so: ...

htmlcssfirefoxwebkitblink