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

Body Zoom Browser

My website features buttons for zooming in and out, labeled as A + and A-. I wanted to make sure that the entire body of the website could be magnified easily. That's why I came up with this code: <html> <body> <style> .cont ...

javascriptcssfunctionbrowserzooming

Extract all class elements from HTML code and save them to a text file using PHP

Is there a way to extract all span elements with the class "msgsource" from my website's HTML code and then save it as a .txt file for downloading? I tried using the following code, but it only downloads an empty text file: <?php // Grabbing conte ...

phphtmldownloadsimple-html-dom

Troubleshooting: Unable to Remove Files in PhoneGap

I've been working on a basic app that heavily utilizes PhoneGap to test its capabilities. Currently, I'm trying to delete a file that has been downloaded within the app, but I'm encountering some issues. The majority of the code I've im ...

javascripthtmlxcodecordova

Issues with displaying PNG background images in older versions of IE while using HTML5?

Below is the HTML code that I am working with: <section class="first-content-top"> <img src="images/img-diner.png" /> <h1>Menu</h1> </section> <section class="first-content-middle"> <article class="m ...

csshtmlinternet-explorerinternet-explorer-8

Display web content using ASP.NET Razor cshtml files

I am currently working on a web application developed with ASP.NET 4.6.1 and utilizing the Razor view engine. Is there a way to trigger a command that will convert all my template files (.cshtml files) into static HTML? For specific stages in my build pro ...

c#htmlasp.netasp.net-mvcrazor

The intended functionality of clicking on an image is exclusively reserved for its immediate parent element

I have a feature on my website that displays an image gallery. When a user clicks on an image, it opens up the image in full screen similar to Facebook's theatre mode. I have written code so that when the user clicks anywhere in the container of the i ...

javascriptjqueryhtmlimage

The challenge of using CSS Flexbox to position the logo with a margin-top

While learning flexbox, I encountered a challenge. I aim to center align h1, p, and button elements, with the logo positioned at the top margin-top of 1em. Essentially, I want the h1, p, and button to be centered, while the logo is positioned at the top wi ...

htmlcssflexbox

Is it advisable to incorporate multiple images onto a single canvas?

What is the best approach to handling multiple images in HTML5? Is it preferable to create a separate canvas tag for each image or is it equally effective to have multiple images in one canvas, and how would I go about doing that? Here is the code I have ...

htmlimagehtml5-canvas

Ensure consistent switching of flexbox directional layout

I'm attempting to create a unique layout using only css3. My challenge is to achieve this without explicitly setting sizes, allowing the layout to flow freely. I am utilizing flexbox in my css for this purpose. After an automatic wrap, I want the layo ...

htmlcssflexbox

ensured maximum height of a div attached to the bottom

<body style="width: 100%; text-align: center;"> <div style="margin: 0 auto;">container <div style="width: 200px; margin-top: 100px; float: left;"> left </div> <div style="width: 728px; floa ...

csshtml

Retrieve the identifiers of various HTML elements and store them in an array

Within a div, there are multiple objects. I am trying to retrieve the IDs of all elements based on their class, knowing that the number of elements may vary. So far, my attempt has been: arr = $(".listitem #checkBox").hasClass('checkedItem').att ...

javascriptjqueryhtml

What is the best way to apply a box-shadow to a specific side of an element?

How can I apply a box shadow to only the right side of a block element? Currently, I achieve this by wrapping the inner element with a box-shadow in an outer element with padding-right and overflow:hidden to hide the other three sides of the shadow. Is the ...

cssshadowbox-shadow

Clearly define where each navigation bar item should be displayed within your Django application using Bootstrap

I've been attempting to specify the exact page where this navbar dropdown should be displayed. I attempted adding this line: {% if request.resolver_match.url_name == 'club_selection' %} class = "active" {% endif %} but it doesn&ap ...

htmldjangotwitter-bootstrap

AdBlock causing image display issue in Firefox with bootstrap and Wordpress

My Wordpress + Bootstrap code is not displaying images in Firefox, despite working fine in other browsers. I tried disabling ad-block as suggested on SO, but it didn't help. I'm stuck. Here's the HTML snippet: <div class="navbar-collap ...

htmlcsswordpressfirefoxtwitter-bootstrap-3

Exploding particles on the HTML5 canvas

I've been working on a particle explosion effect, and while it's functional, I'm encountering some issues with rendering frames. When I trigger multiple explosions rapidly by clicking repeatedly, the animation starts to lag or stutter. Could ...

javascripthtmlcanvas

"Can you provide instructions on how to set the background to the selected button

How can I change the background color of a selected button in this menu? Here is the code for the menu: <ul id="menu"> <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></ ...

javascriptjqueryhtmlcss

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

javascriptphphtml

Issue with React TSX component in NextJs 14.0.4: Local MP3 files cannot be played, only external online MP3 files work

I have created a component that wraps around HTML audio and source tags. It functions perfectly when playing mp3 files from an external source, like this sound clip . However, it returns a GET 404 error when trying to access local mp3 files. Can anyone exp ...

htmlreactjstypescriptnext.jsaudio

Deleting an HTML column that has a dynamic header name <th> can be achieved by following these steps

I have a script that can add a new column to an HTML table. When the user clicks on add group, the header will change to Group1, Group2, and so on. I am currently adding a function for delete group that can delete all the added columns. The issue now is th ...

javascripthtmljquery

Get the PDF in a mobile app using HTML5 and Javascript

For my HTML5/JavaScript-based mobile application, I am in need of implementing a feature that enables users to download a PDF file. The PDF file will be provided to me as a Base64 encoded byte stream. How can I allow users to initiate the download proces ...

javascripthtmlpdfmobile