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

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

If I have two identical images displayed on a page at different sizes, what is the best option for optimizing performance? On one hand, using an image already sized correctly can improve performance, especially on mobile devices. On the other hand, using t ...

htmlimageperformance

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

How can I adjust the height of a mat-select in Angular7 to display all items properly? Here is my component file: import { Component, ViewEncapsulation } from "@angular/core"; import { FormControl } from "@angular/forms"; /** @title Select with multiple ...

htmlcssangulartypescriptangular-material

Having trouble with uploading image files in Laravel Vue.js?

I have been trying to upload my image file to a storage folder using Laravel and Vue.js. However, when I try to print the data using dd();, I get no response or error. How can I tell if I am doing it correctly? I suspect the error lies in the formData whe ...

phphtmllaravelvue.js

How to style a div to center an image vertically with text using CSS

I attempted to vertically align an image next to text within my link. Thus far, I've relied on a background image to achieve perfect vertical centering for the image of my text. CSS .label { margin: 0 0 0 15px; padding: 0; color: #fff; } a.morein ...

css

Using JQuery to parse an XML file and automatically redirecting the page if a specific attribute equals "Update"

Updated I've made some edits to clarify my request. My website is built using HTML5, CSS3, and JQuery, resulting in all content being on one page. During updates, I want the ability to set an option in a configuration file so that when users visit m ...

javascriptjqueryhtmlcssweb-config

The 'id' field was anticipating a numerical value, but instead received 'bidding'

When constructing a HTML page based on a model, I encountered an issue with a form that seems to be causing interference with the model being used for building the page. The error message I received is: Exception Type: ValueError at /bidding Exception Va ...

pythonhtmldjangoforms

Rendering EJS templates and smoothly scrolling to a specific section on a webpage

I need to display my index page and automatically scroll down to the form section. One way I thought of doing this is by: app.post('/rsvp', (req, res) => { res.render('index/#rsvp', { errors: { email: 'Your email has already ...

htmlnode.jsexpressejs

Has jQuery UI Accordion taken over the design of unordered lists?

I'm having trouble with my website's navigation styling getting messed up by the jQuery accordion. The unordered list inside the .accordion div is overflowing and losing its CSS styling. I've tried adding clearStyle true and autoHeight false ...

jquerycsslistaccordion

Ways to achieve perfect alignment for SVG text within its container, as opposed to stretching across the entire webpage

Recently, I've been working on a customizable photo frame designer using SVG. One of the key features allows users to add their own text to the frame. To achieve this, I'm utilizing jQuery's .keyup function. However, the issue I'm facin ...

jqueryhtmlcsssvg

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Using the CSS property scroll-snap-type: y mandatory; to customize my scrollbar with the following styles: ::-webkit-scrollbar { width: 12px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); -webkit-box-s ...

javascripthtmlcss

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

jquerycss

Easy Steps to Align a Rotated Table Header

I am looking to rotate the header table using CSS while keeping all text together. Here is my CSS code: th.rotate { height: 100px; white-space: nowrap; } th.rotate>div { transform: rotate(-90deg); } Here is how I have applied this CSS: ...

htmlcss

Could really use a hand getting this card grid to be more responsive

Recently, I delved into using HTML & CSS for work. However, I encountered a major hurdle: creating responsive Grid card elements. I have four card elements in a column, each with text that increases opacity when hovering over the card. When viewed on a t ...

htmlcssresponsive-designgrid

Update the button functionality according to the button's unique identifier

I am trying to dynamically change the button's redirect link based on its ID in my NEXT.JS project, but as a newcomer to this framework, I am unsure of how to accomplish it. I understand that this modification should be done after rendering, possibly ...

javascripthtmldomswitch-statementnext.js

When applying a maximum width of 100% with automatic height, images may become cropped

I'm a beginner in learning CSS, and since my technical skills are limited, I'll try to keep things simple. Currently, I have an image taking up half of the screen with the following CSS code that I found after reading some articles: <div class ...

htmlcss

Adjust the background color of JQuery UI modal dialog overlay in real-time

How can I dynamically change the background color of a page when a modal dialog loads, specifically targeting only one specific modal dialog? Setting the background color with CSS works fine: .ui-widget-overlay { background-color: white; } Here's ...

jquerycssjquery-uimodal-dialog

Rotating through elements in timed intervals

After exploring various examples of how to show/hide divs with a JavaScript timeout, I am still unable to resolve my specific issue. I currently have six divs that I want to cycle through sequentially every 10 seconds, starting with div #one. Although my ...

javascripthtmljquery

Restrict the dimensions of the image to fit within the div

I've been struggling to resize my LinkedIn logo on my website. I've attempted various methods, like using inherit and setting max height and width to 100%, but the logo keeps displaying at full size. Do I need to use a different type of containe ...

htmlcss

Encountering issues with Html.ActionLink in Asp.net MVC when using Bootstrap Select

I am trying to implement a dropdown list for language localization on my website. However, when using <ul> tags with Html.ActionLink, the links are created with language codes as shown below: @{ var routeValues = this.ViewContext.RouteData.Valu ...

jqueryhtmlasp.netasp.net-mvctwitter-bootstrap

Is it possible to dynamically group by one column in a dataset without requiring a trigger function?

I've been working on a script that retrieves values from another page and organizes them into a table alphabetically by Name, City, and District. The current script is functioning well, but I now want to enhance it by grouping the values by city as we ...

javascripthtmljquerydatatables