Trying to arrange HTML elements in a diagonal configuration while ensuring they are all uniform in size

My goal is to create an attractive splash page with diagonal, circular links that are all the same size. The <p>'s will function as the links, but I'm struggling to figure out how to make them all diagonal and uniform in size.

I've experimented with various flexbox configurations, but haven't delved into CSS grid yet — that's next on my agenda.

/*variable declarations*/

:root {
  --teal: #37C8AB;
  --white: #ffffff;
  --black: #000000;
  --lilac: #B380FF;
  --purple: #7137C8;
  --aqua: #008066;
}

/*page body*/
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page-container {
  background: var(--lilac);
  margin-top: 10px;
  padding-bottom: 5em;
  padding-left: 2em;
  padding-top: 5.8em;
}

/*Text Conatiner*/

.tcontainer-frame {
  background: var(--purple);
  border: var(--black) 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.tcontainer {
  background: var(--black);
  font-size: 24px;
  padding: 12em 1em;
  text-align: center;
}

.teal-font {
  color: var(--teal);
}

/*Link container*/
.link-container {
  display: flex;
  flex-flow: column wrap;
  padding: 4em;
  text-align: center;
}

#newSolCircle {
  align-items: center;
  align-self: flex-start;
  background: var(--teal);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  justify-content: center; 
  margin: 2em;
  padding: 1em;
}

#patronCircle {
  align-items: center;
  align-self: center;
  background: var(--aqua);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  margin: 2em;
  padding: 1em;
}

#alchemistCircle {
  align-items: center;
  align-self: flex-end;
  background: var(--purple);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  margin: 2em;
  padding: 1em;
}
<body class="bg-dark">
  <div class="container-fluid page-container">
    <div class="row">
      <div class="col-6 tcontainer-frame">
        <div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
            welcome
            you. Please make your
            selection to the right.</span>
        </div>
      </div>
      <div class="col-6 link-container">
        <div id="newSolCircle">
          <p>New Solicitor</p>
        </div>
        <div id="patronCircle">
          <p>Patron</p>
        </div>
        <div id="alchemistCircle">
          <p>Alchemist</p>
        </div>
      </div>
    </div>
  </div>
</body>

I am seeking assistance on aligning those 3 circles correctly and making sure they all have the same width and height. Thank you in advance for any help!

htmlcssflexbox

Answer №1

To ensure uniform sizing and circular shape, it was essential to include both width and height properties. Afterwards, I eliminated the flex: 1 1 0; line as the issue was resolved with just the align-items property along with width and height.

:root {
  --teal: #37C8AB;
  --white: #ffffff;
  --black: #000000;
  --lilac: #B380FF;
  --purple: #7137C8;
  --aqua: #008066;
}


/*page body*/

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page-container {
  background: var(--lilac);
  margin-top: 10px;
  padding-bottom: 5em;
  padding-left: 2em;
  padding-top: 5.8em;
}


/*Text Container*/

.tcontainer-frame {
  background: var(--purple);
  border: var(--black) 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.tcontainer {
  background: var(--black);
  font-size: 24px;
  padding: 12em 1em;
  text-align: center;
}

.teal-font {
  color: var(--teal);
}


/*Link container*/

.link-container {
  display: flex;
  flex-flow: column wrap;
  padding: 4em;
  text-align: center;
}

.circle {
  border-radius: 100%;
  display: flex;
  height: 50px;
  width: 50px;
  margin: 2em;
  padding: 1em;
  justify-content: center;
}

#newSolCircle {
  align-items: center;
  align-self: flex-start;
  background: var(--teal);
}

#patronCircle {
  align-items: center;
  align-self: center;
  background: var(--aqua);
}

#alchemistCircle {
  align-items: center;
  align-self: flex-end;
  background: var(--purple);
}
<body class="bg-dark">
  <div class="container-fluid page-container">
    <div class="row">
      <div class="col-6 tcontainer-frame">
        <div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
            welcome
            you. Please make your
            selection to the right.</span>
        </div>
      </div>
      <div class="col-6 link-container">
        <div id="newSolCircle" class="circle">
          <p>New Solicitor</p>
        </div>
        <div id="patronCircle" class="circle">
          <p>Patron</p>
        </div>
        <div id="alchemistCircle" class="circle">
          <p>Alchemist</p>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

Answer №2

Give this a try

/*CSS variable declarations*/

:root {
  --teal: #37C8AB;
  --white: #ffffff;
  --black: #000000;
  --lilac: #B380FF;
  --purple: #7137C8;
  --aqua: #008066;
}

/*Styling for page body*/
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page-container {
  background: var(--lilac);
  margin-top: 10px;
  padding-bottom: 5em;
  padding-left: 2em;
  padding-top: 5.8em;
}

/*Styles for Text Container*/

.tcontainer-frame {
  background: var(--purple);
  border: var(--black) 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.tcontainer {
  background: var(--black);
  font-size: 24px;
  padding: 12em 1em;
  text-align: center;
}

.teal-font {
  color: var(--teal);
}

/*Link container styles*/
.link-container {
  display: flex;
  flex-flow: column wrap;
  padding: 4em;
  text-align: center;
}

.circle {
  align-items: center;
  align-self: flex-start;
  background: var(--teal);
  border-radius: 100%;
  display: flex;
  /* flex: 1 1 0; */
  justify-content: center; 
  height: 150px;
  width: 150px;
}
#newSolCircle {
  display: flex;
  justify-content: flex-start;
}
#patronCircle {
  display: flex;
  justify-content: center;
}
#patronCircle .circle {
  background: var(--aqua);
}
#alchemistCircle {
  display: flex;
  justify-content: flex-end;
}
#alchemistCircle .circle {
  background: var(--purple);
}
<body class="bg-dark">
  <div class="container-fluid page-container">
    <div class="row">
      <div class="col-6 tcontainer-frame">
        <div class="tcontainer"><span class="teal-font">Greetings! You have arrived at the Image Alchemists web portal. We
            extend a warm welcome to you. Please choose your path on the right.</span>
        </div>
      </div>
      <div class="col-6">
        <div class="link-container">
          <div id="newSolCircle">
            <p class="circle">New Solicitor</p>
          </div>
          <div id="patronCircle">
            <p class="circle">Patron</p>
          </div>
          <div id="alchemistCircle">
            <p class="circle">Alchemist</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

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

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

javascriptjqueryhtmlcssdraggable

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...

javascriptcssreactjsmaterial-ui

Unable to determine the data type of the JSON object during the

I'm having trouble reading an Object type of json... Here is the json I'm working with: body: { "111": { "name": "name1", "status": 10000 }, "222": { "name": "name2", "status": 20000 }, "333": ...

htmljsontypescriptangulargetjson

Leveraging CSS to automatically number nested sections

Assume we have an example HTML or XML document structured like this: <body> <section> <h1>This should be numbered 1</h1> <section> <h1>This should be numbered 1.1</h1> <p>blah& ...

htmlcsscss-counter

Detecting single letters in a sentence and changing their appearance using CSS

Looking to make a subtle change to text? I need to swap out single letters in a passage (I have a cat that ate a fish). Any ideas on how to do this? The goal is to input a block of text into a textbox, then display it in a div. I've had difficulty fi ...

javascriptjqueryhtmlcssjquery-selectors

Ways to utilize jquery to limit the length of an editable div and prevent it from exceeding our specified restriction

Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...

javascriptjqueryhtmlcontenteditablemaxlength

Is it recommended to place the styles created by material-ui for child components after the styles generated for the parent component?

Utilizing material-ui, which utilizes JSS for styling a website. I have a component named Layout that applies margin to all its children (using the all children selector & > * in its style). This functionality works, but I would also like the child ...

javascriptcssreactjsmaterial-uijss

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

I am facing the challenge of parsing an unknown JSON with uncertain key-value pairs. As I do not have prior knowledge of the keys to access, my goal is to traverse through every key in the JSON and display all keys and their corresponding values on the scr ...

javascriptjqueryhtmljson

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

javascriptjqueryhtmlcss

Tips for shutting down a modal box without using the "x" button?

I'm currently working on creating a modal box using HTML and Javascript, and I came across this example (reference https://www.w3schools.com/howto/howto_css_modals.asp), which seems to fit my needs quite well... I made some modifications to it... &l ...

javascripthtmlmodal-dialog

Leveraging ternary operators within HTML elements

Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...

javascripthtmlvue.jsconditional-operator

Custom styles for PrimeNG data tables

Struggling to style the header of a datatable in my Angular project using PrimeNG components. Despite trying various solutions, I am unable to override the existing styles. Even attempting to implement the solution from this PrimeNG CSS styling question o ...

cssangulardatatableprimeng

Changing the color of a placeholder using Javascript: A step-by-step guide

I've been searching online without any luck so far. I'm attempting to change the placeholder color of a text box using JavaScript, but I'm not sure how to go about it. I already have a color picker that changes colors. If my CSS looks somet ...

javascripthtmlcsspseudo-element

Visualization of XML Datamarkup

I am facing an issue with a function that generates XML from a source. Everything works perfectly except for when certain fields are too long, causing the table to stretch and mess up the website formatting. Is there a way to automatically insert line brea ...

phphtmlxml

How can I create a custom elevation for a Vuetify v-menu?

I'm currently working with vuetify and v-menu as outlined in the official documentation here https://vuetifyjs.com/en/components/menus/ I'm struggling to figure out how to apply elevation only on the bottom left and right corners. When I add a ...

cssvue.jsvuetify.js

Content Security Policy directive violation: Chrome extension policy error occured due to refusal to execute inline event handler

I've been working on a chrome extension to perform a simple task, but I've hit a roadblock with one line of HTML code that's causing issues with setting the correct permissions. Despite my efforts, I'm stuck on what exactly needs to be ...

javascripthtmljsongoogle-chrome

Is there a way to align two links side by side, with one on the left and the other on the right?

<a href="example"><p style="text-align:left">Previous Page</a> <a href="example"><p style="text-align:right">Next Page</a> I am trying to figure out how to align these links on the same line. Any suggestions would be a ...

htmltexthref

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

htmlcssangularangular-material

Differences in behavior of multiple select with track by in Angular versions above 1.4.x

I recently upgraded my product from Angular 1.2.x to 1.4.x. Since updating to angularjs 1.4.x, I've encountered an issue: What I have: I included code snippets for both angular 1.2.0 and 1.4.8. You can check out the comparison on JSFIDDLE. Explanat ...

javascripthtmlangularjshtml-select

Disable the button until all input fields contain text in ASP

Curious if anyone knows how to disable a button until all text boxes have input in ASP.NET and C#. Here is an image showing the scenario I'm referring to - wanting to gray out the commit button. Thanks, Chris! ...

c#javascripthtmlasp.net