I want to use flexbox to make a column that can scroll as its text content gets longer.
I drew a picture in keynote to make a better explanation.
when texts are small
when texts get big
Here is my current code, just every elements in my code is in flexboxes.
I edited my script to include .app .sidebar
.app {
display: flex;
height: 100vh;
flex-direction: row;
}
.sidebar {
display:flex;
flex: 1;
}
.cv {
display: flex;
flex:5;
flex-direction: column;
margin:20px;
border: 1px solid lightgrey;
border-radius: 10px;
background-color: white;
overflow: scroll;
}
.header {
display: flex;
flex: 0 0 150px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.section {
display: flex;
flex-direction: column;
border: 1px solid lightgrey;
margin: 10px;
border-radius: 10px;
}
.sectionHeader{
display: flex;
align-items: center;
font-size: 18px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 5px;
flex: 0 0 30px;
background-color: gray;
color:white;
font-weight: 700;
}
.sectionBody{
display: flex;
flex: 1;
padding: 20px;
}
<div class="app">
<div class="sidebar"></div>
<div class="cv">
<div class="header">Header</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
</div>
</div>
You need to do 2 things:
Give the cv a min-height: 0; (fix for i.a. Firefox)
Add flex-shrink: 0 to the .section so it won't collapse when not fit
Stack snippet
body {
margin: 0;
}
.app {
display: flex;
height: 100vh;
}
.sidebar {
display: flex;
flex: 1;
background: red;
}
.cv {
display: flex;
flex: 5;
flex-direction: column;
margin: 20px;
border: 1px solid lightgrey;
border-radius: 10px;
background-color: white;
overflow: scroll;
min-height: 0; /* added */
}
.header {
display: flex;
flex: 0 0 150px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.section {
display: flex;
flex-direction: column;
border: 1px solid lightgrey;
margin: 10px;
border-radius: 10px;
flex-shrink: 0; /* added */
}
.sectionHeader {
display: flex;
align-items: center;
font-size: 18px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 5px;
flex: 0 0 30px;
background-color: gray;
color: white;
font-weight: 700;
}
.sectionBody {
display: flex;
flex: 1;
padding: 20px;
}
<div class="app">
<div class="sidebar">sidebar</div>
<div class="cv">
<div class="header">Header</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
</div>
</div>
Related
I'm facing this problem where I want to have a header, sidebar and content with flexbox. I can't get to a solution to divide these 3 childs. I've been trying to use flex-grow and flex-direction:row but I'm having a problem.
Image of the website
How I want it to be
<style>
.parent {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: column;
}
.header {
width: 200px;
height: 200px;
background: cornflowerblue;
}
.side {
width: 200px;
height: 200px;
background: rgb(219, 133, 133);
}
.content {
width: 200px;
height: 200px;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
You need to create two containers, one for all your elements and one for your header and content.
<div class="parent"> <!-- Container 1 -->
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="container"> <!-- Container 2 -->
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
Then, you can treat each container as a separate flex-box. the parent will have a flex-direction: row; and the container will have flex-direction: column;.
You also want to set values in percentages, not absolute values as you have right now (200px, 20rem..).
.parent {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: row;
}
.header {
height: 30%;
background: cornflowerblue;
}
.side {
width: 30%;
height: 100%;
background: rgb(219, 133, 133);
}
.content {
height: 70%;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
width: 70%;
height: 100%;
}
JSFiddle
Images to illustrate the separation:
You have to wrap your header & content section inside another div. Something like this below example. However, The best way to achieve this layout is using a CSS grid. Here is the complete CSS grid guide
.parent {
display: flex;
height: 100vh;
background: #000;
padding: 5px;
margin: 0;
}
.side {
border: 1px solid #000;
width: 30vw;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
margin-right: 5px;
}
.main-body {
border: 1px solid #000;
width: 70vw;
}
.header,
.content {
display: flex;
justify-content: center;
background: #fff;
}
.header {
height: 25vh;
margin-bottom: 5px;
}
.content {
align-items:center;
height: 70vh;
}
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main-body">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I don't think that you deeply understand how flexbox work. You should read more about it. I advice you to read a book called CSS-in Depth. You can download it online from a website called Z-lib. Try to understand the code that I posted for you.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.parent {
height: 100vh;
border: 20px solid black;
display: flex;
background: pink;
}
.main {
display: flex;
backgound-color: green;
flex-direction: column;
flex: 2
}
.header {
background: cornflowerblue;
}
.side {
flex: 1;
background: rgb(219, 133, 133);
}
.content {
background: rgb(115, 202, 180);
flex: 1
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 9 months ago.
I'm trying to expand the content in the middle (main-box) to fit the whole page until it reaches the footer.
I've tried adding flex: 1 to it, making the height: 100% or even use flex-grow: 1 as it is a child of a flex item.
body {
display: flex;
flex: 1;
flex-direction: column;
border: solid black 10px;
}
.page {
display: flex;
flex-direction: column;
flex: 1;
}
header {
background-color: #2D3047;
color: #E0CA3C;
}
.container {
flex-grow: 1;
}
.buttons {
text-align: center;
}
.points {
display: flex;
justify-content: center;
gap: 10px;
}
.computer,
.player {
border: solid black 2px;
padding: 10px;
margin: 20px;
}
.result {
text-align: center;
border: solid black 2px;
margin: 0;
padding: 0;
width: auto;
}
footer {
background-color: #2D3047;
color: #E0CA3C;
justify-self: flex-end;
}
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">Copyright CAIFRA</div>
</div>
Codepen
I see you are using position absolute on footer class , in my opinion take a look i change it into a position relative. using position relative with bottom 0 , then it will work,
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">
Copyright CAIFRA
</div>
</div>
CSS CODE
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 20px;
}
.page {
display: flex;
flex-direction: column;
flex: 1;
}
.main-box {
background-color: #93B7BE;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
.computer-score, .player-score {
border: 2px black solid;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.points {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.result {
border: 2px black solid;
height: 50px;
width: 300px;
margin-left: auto;
margin-bottom: 20px;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-top: 30px;
}
.footer {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 10px;
position: relative;
bottom: 0;
left: 0;
width: 100%;
}
Maybe you can add 100vh on your container and see if this is what you want. Let me know
html {height: 99.1%;}
body {
flex-direction: column;
border: 10px solid black ;
height:99.1%;
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-direction: column;
}
header {
background-color: #2D3047;
color: #E0CA3C;
}
.container {
height: 99.1% ;
bottom: 10px;
overflow: hidden;
}
.buttons {
text-align: center;
}
.points {
display: flex;
justify-content: center;
gap: 10px;
}
.computer,
.player {
border: solid black 2px;
padding: 10px;
margin: 20px;
}
.result {
text-align: center;
border: solid black 2px;
margin: 0;
padding: 0;
width: auto;
}
.footer {
background-color: #2D3047;
color: #E0CA3C;
bottom: 10px;
position: fixed;
width: 100%;
}
<body>
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">Copyright CAIFRA</div>
</div>
</body>
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 20px;
}
.page {
display: flex;
flex-direction: column;
height: 90vh;
}
.main-box {
background-color: #93B7BE;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
height: 100vh;
}
.computer-score,
.player-score {
border: 2px black solid;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.points {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.result {
border: 2px black solid;
height: 50px;
width: 300px;
margin-left: auto;
margin-bottom: 20px;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-top: 30px;
}
.footer {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
<div class="footer">
Copyright CAIFRA
</div>
</div>
</div>
Simply add body { min-height: 100vh; }, so it actually ahs the size of at least the viewport size. By default it will only have the height of the content.
body {
margin: 0;
box-sizing: border-box;
min-height: 100vh;
}
/* original CSS */
body {
display: flex;
flex-direction: column;
border: solid black 10px;
}
.page {
display: flex;
flex-direction: column;
}
header {
background-color: #2D3047;
color: #E0CA3C;
}
.container {
flex-grow: 1;
}
.buttons {
text-align: center;
}
.points {
display: flex;
justify-content: center;
gap: 10px;
}
.computer,
.player {
border: solid black 2px;
padding: 10px;
margin: 20px;
}
.result {
text-align: center;
border: solid black 2px;
margin: 0;
padding: 0;
width: auto;
}
footer {
background-color: #2D3047;
color: #E0CA3C;
}
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">Copyright CAIFRA</div>
</div>
Goal: I have a main flex box with row display. Within each of these flexbox I will have card with text inside. When I create the card inside the flexbox I place p tags inside the card with the text, but it does not reflect. I want the text to dsiplay within each card.
Code
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
line-height: 70vh;
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
Remove line-height: 70vh; property from the .flex-container>div
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
/*line-height: 70vh;*/
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
I have a JS fiddle here and it's pretty simple what I want to happen but difficult for me to execute it. In the fiddle, you notice there is a red box. I want that red box to be displayed under the text "Join Balance...". I am not sure how to do this.
Can somebody help me?
Fiddle: https://jsfiddle.net/f2h390wc/
HTML and CSS:
/* newsletter section */
#custom_html-5 {
width: 100%;
background-color: #f2f2f2;
padding-bottom: 40px;
padding-top: 20px;
margin-bottom: 70px;
padding-left: 70px !important;
padding-right: 20px !important;
}
.newsletter_inner_section {
display: flex;
}
.newsletter_gif {
width: 200px;
height: auto;
}
.newsletter_left,
.newsletter_center,
.newsletter_right {
display: inline-flex;
}
.newsletter_left {
width: auto;
}
.newsletter_center {
width: 100%;
align-items: center;
}
.newsletter_right {
background: red;
width: 40%;
justify-content: flex-end;
}
.newsletter_text_section {
color: black !important;
font-size: 24px !important;
font-weight: bold;
}
.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD {
width: fit-content !important;
padding: 0 20px;
}
.fGCWnQ.fGCWnQ {
justify-content: flex-end;
}
.kvTDNe.kvTDNe {
display: unset;
}
/* Media Newsletter section only */
#media (max-width:1144px) {
#custom_html-5 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.newsletter_inner_section {
width: 100% !important;
justify-content: center;
display: flex;
}
.newsletter_center,
.newsltter_right {
flex-direction: column !important;
}
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_inner_section">
<div class="newsletter_left">
<img src="https://balancecoffee.co.uk/wp-content/themes/balancecoffeechild/img/newsletternnobkg2.gif" alt="Balance Newsletter" style="padding-right:30px;" class="newsletter_gif">
</div>
<div class="newsletter_center">
<p class="newsletter_text_section">Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_right">
<div class="newsletter_input_section">
<div class="klaviyo-form-Rrsqsh"></div>
</div>
</div>
</div>
</div>
If you want the text and the red box on the right to form a column, then they both need to be in a flexbox with flex-direction: column;.
I created a sample from scratch because there is a lot of superfluous stuff in your JSFiddle.
.group {
display: flex;
flex-direction: row;
width: 100%;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 40px;
}
.left {
background-color: blue;
}
.right {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.top-right {
background-color: green;
}
.bottom-right {
background-color: red;
}
<div class='group'>
<div class='left content-box'>
Content
</div>
<div class='right'>
<div class='top-right content-box'>
Content
</div>
<div class='bottom-right content-box'>
Content
</div>
</div>
</div>
https://www.w3schools.com/cssref/css3_pr_flex-direction.asp
display: flex;
flex-direction: column;
So basically I am trying to create nice splash page and the designer wants the links diagonal, circular, and all the same size, the <p>'s are gonna be links, but how can I make them all diagonal and all the same size circle?
I have tried a lot of different flexbox combinations I haven't tried CSS grid yet, that is going to be what I try next.
/*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 just hoping to get those 3 circles to all line up correctly and have them all be the same width and height. Thanks in advance for anyone's help.
Including width and height was necessary to make them of the same size and in circle shape.
Then i removed flex: 1 1 0; as the align-items property alone was solving the problem along with the 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 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;
}
.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>
Try this
/*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;
}
.circle {
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; */
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">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">
<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>