I am having difficult to style the elements inside a div in vertically aligned position.
Here is the snippet. I am kind new to CSS flexbox.
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container {
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800;
line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width: 400px;
height: auto;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div><span class="framework_rating">3</span>React</div>
<div><span class="framework_rating">6</span>Blazor</div>
<div><span class="framework_rating">2</span>Knockout.js</div>
</div>
</div>
As you see the rating and name should be on the same line. I would appreciate any help.
A simple solution is to put a class for the div wrapping the elements that you want in the same line:
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container{
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800; line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width:400px;
height:auto;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 25%;
}
<body>
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div class="wrapper"><span class="framework_rating" >3</span>React</div>
<div class="wrapper"><span class="framework_rating" >6</span>Blazor</div>
<div class="wrapper"><span class="framework_rating" >2</span>Knockout.js</div>
</div>
</div>
</body>
Hope this helps. Best Regards.
you need to add this css on div of frameworks-wrapper id.
you can used flexbox here, which gives you flex layout
#frameworks-wrapper>div{
display: flex;
}
For more referance please check this flexbox guide
You just need to add css on the div inside your wrapper:
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container{
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800; line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width:400px;
height:auto;
}
#frameworks-wrapper>div{
width: 100px;
display: flex;
justify-content: space-between;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
<body>
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div><span class="framework_rating" >3</span>React</div>
<div><span class="framework_rating" >6</span>Blazor</div>
<div><span class="framework_rating" >2</span>Knockout.js</div>
</div>
</div>
</body>
Related
I am trying to use flexbox with font awesome icon and its pseudo element. I'm getting the desired look only on VSC live server until I refresh the page, then everything crashes. Tried to add flex-wrap: wrap or wrap into another div but the problem still appears:
.option {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
outline: 5px solid white;
}
.fa-solid {
color: white;
font-size: 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.fa-solid::after {
content: "Meditate";
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
letter-spacing: 5px;
margin-top: 1rem;
font-size: 1rem;
color: white;
}
<div class="container">
<div class="option"><i class="fa-solid fa-brain"></i></div>
<div class="option"></div>
<div class="option"></div>
</div>
Desired result:
After refresh:
I have an issue to center an element in my div.
I'm using display flex, align-self and justify-self to center it.
I think this is ok by this way, but I have an unknown element when I inspect from the web browser.
You can see on the right, there is an as striped element that I don't know where it come from.
Here is the parent element made with grid.
You can see the issue from the fiddle here
https://jsfiddle.net/Martin40/qtjphvga/3/
Here is my CSS
.customer_card{
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-self: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
Here is my HTML
<head><link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"></head>
<div class="customer_card">
<div class="customer_card_logo"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
Anyone know what's the problem ?
Thank you !
The "striped element" is just the grid gap you have defined on .customer_card here (doesn't cause the centering issue):
gap: 0px 10px;
To center the icon, replace the width/height-based approach with using padding instead. This way, you don't have to worry about the size of the icon which could cause misalignments:
.customer_card_logo {
/* width: 50px; */
/* height: 50px; */
padding: 0.5rem;
}
Try the modified snippet below:
.customer_card {
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-self: center;
text-align: center;
background: grey;
border-radius: 50%;
#width: 50px;
#height: 50px;
padding: 0.5rem;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo>.material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover>.material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<div class="customer_card">
<div class="customer_card_logo" title="Changer de client"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
</div>
<!-- language: lang-css -->
.customer_card {
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-content: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
<!-- language: lang-html -->
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<body>
<div class="customer_card">
<div class="customer_card_logo" title="Changer de client"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
</div>
</body>
<!-- end snippet -->
Using inline element span inside a div with display grid creates that gap. By adding width 100 percentage to your span will fix it.
Below you could find the code.
.customer_card{
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-self: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
width: 100%;
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<div class="customer_card">
<div class="customer_card_logo" title="Changer de client"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
</div>
https://jsfiddle.net/3b1kLzv2/5/
Thanks everyone.
I didn't talk about the gap of the grid but the stripped element in the flex ;)
justify-content: center;
On the customer_card_logo saved the problem.
Thanks !
I am trying to recreate this page using HTML and CSS:
However, I cant seem to get the padding changed for the box on the right. This is what mine looks like so far:
How do I adjust the CSS so that the text doesnt have that big white gap on top? Here is my code:
.flexbox {
margin: 1rem 6rem;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
/* background-color: grey; */
}
.ten {
height: 100%;
text-align: center;
flex-basis: 40%;
font-size: 25vw;
letter-spacing: -3rem;
}
.yrs-exp {
min-height: 100%;
display: flex;
flex-direction: column;
flex-basis: 18%;
}
.yrs-exp p {
margin-bottom: 2rem;
}
.yrs-exp button {
text-transform: capitalize;
height: 7vh;
width: 80%;
}
.deats {
display: flex;
min-height: 100%;
flex-basis: 30%;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.deat {
display: flex;
align-items: center;
flex-direction: column;
flex-basis: 49%;
border: solid 1px black;
}
.deat h2 {
font-size: 6vw;
margin-bottom: -0.8rem;
}
.deat p {
text-transform: uppercase;
margin-top: 0;
}
<div class="flexbox">
<div class="ten">10</div>
<div class="yrs-exp">
<h1>Years of experience</h1>
<p>
DreamSoft is a team of highly experienced app designers and developers
creating unique software for you.
</p>
<button>GET IN TOUCH</button>
</div>
<div class="deats">
<div class="deat">
<h2>2k</h2>
<p>Apps developed</p>
</div>
<div class="deat">
<h2>40</h2>
<p>Consultants</p>
</div>
<div class="deat">
<h2>12</h2>
<p>Awards</p>
</div>
<div class="deat">
<h2>160</h2>
<p>Employees</p>
</div>
</div>
</div>
And here it is in a codepen: https://codepen.io/caseycling/pen/yLVdzja
I made a few more changes:
.flexbox {
margin: 1rem 6rem;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
/* background-color: grey; */
}
/* .flexbox > div {
background-color: rgb(206, 89, 89);
} */
.ten {
height: 100%;
text-align: center;
flex-basis: 40%;
font-size: 25vw;
letter-spacing: -3rem;
}
.yrs-exp {
min-height: 100%;
display: flex;
flex-direction: column;
flex-basis: 18%;
}
.yrs-exp p {
margin-bottom: 2rem;
}
.yrs-exp button {
text-transform: capitalize;
height: 7vh;
width: 80%;
}
.deats {
display: flex;
min-height: 100%;
flex-basis: 30%;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.deat {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex-basis: 49%;
height: 150px;
border: solid 1px black;
}
.deat h2 {
font-size: 6vw;
margin: 0;
}
.deat p {
text-transform: uppercase;
margin-top: 0;
}
.clients {
display: flex;
margin: 1rem 6rem;
justify-content: space-around;
}
.clients img {
opacity: 0.5;
border: solid 1px rgba(0, 0, 0, 0.5);
}
.clients img:hover {
opacity: 1;
border: solid 1px rgb(0, 0, 0);
}
<div class="flexbox">
<div class="ten">10</div>
<div class="yrs-exp">
<h1>Years of experience</h1>
<p>
DreamSoft is a team of highly experienced app designers and developers
creating unique software for you.
</p>
<button>GET IN TOUCH</button>
</div>
<div class="deats">
<div class="deat">
<h2>2k</h2>
<p>Apps developed</p>
</div>
<div class="deat">
<h2>40</h2>
<p>Consultants</p>
</div>
<div class="deat">
<h2>12</h2>
<p>Awards</p>
</div>
<div class="deat">
<h2>160</h2>
<p>Employees</p>
</div>
</div>
</div>
<div class="clients">
<a id="client"
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-9-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-10-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-3-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-11-270x117.png"
alt="mittos"
/></a>
</div>
I was trying to make the homepage layout for a project that I'm doing with the help of a course and they SCSS to style their Reactjs. But the layout isn't the same to the one in the course even after using the exact same styling. So, please help me out.
Thanks in advance.
Expected :
Result :
Here's the styling :
.homepage {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;
}
.directory-menu {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 15px;
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
height: 90px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid black;
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: #4a4a4a;
}
.subtitle {
font-weight: lighter;
font-size: 16px;
}
}
}
Here's the code :
<div className='homepage'>
<div className='directory-menu'>
<div className= 'menu-item'>
<div className='content'>
<h1 className='title'>HATS</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
</div>
.
.
.
.
</div>
What you have works. It's a dynamic layout so your viewing width effects it; resize the browser and you'll see:
https://codesandbox.io/s/nifty-kalam-1bx9t?file=/src/styles.scss
I'm having troubles with one of a my flex items.
I'm trying to position the 2 spans of my flex div so that one is above the other, but it looks like the properties of flex force them to be next of each other.
Here is what I'm looking to do (the date element)
and here is what I have :
#til-container #til-header #til-date-container {
display: flex;
align-items: center;
position: absolute;
top: 30px;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid #CCC;
background: white;
}
#til-container #til-header #til-date-container #til-date {
display: flex;
align-items: center;
position: relative;
margin: auto;
width: 52px;
height: 52px;
border-radius: 50%;
background: #d24949;
color: #FFF;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 900;
text-align: center;
}
#til-container #til-header #til-date-container #til-day {
font-size: 20px;
}
#til-container #til-header #til-date-container #til-month {
font-size: 10px;
}
<div id="til-container">
<div id="til-header">
<div id="til-date-container">
<div id="til-date">
<span id="til-day">25</span>
<br/>
<span id="til-month">dec</span>
</div>
</div>
</div>
</div>
I've tried several things such has displaying the spans as blocks so they take the full width of the container and force the next span to position below the first one, but that wouldn't work. Any ideas ?
Using flex, you could add to #til-date
flex-direction: column;
justify-content: center;
I edited your snippet to add it :
#til-container #til-header #til-date-container {
display: flex;
align-items: center;
position: absolute;
top: 30px;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid #CCC;
background: white;
}
#til-container #til-header #til-date-container #til-date {
display: flex;
align-items: center;
position: relative;
margin: auto;
width: 52px;
height: 52px;
border-radius: 50%;
background: #d24949;
color: #FFF;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 900;
text-align: center;
/* Added */
flex-direction: column;
justify-content: center;
}
#til-container #til-header #til-date-container #til-day {
font-size: 20px;
}
#til-container #til-header #til-date-container #til-month {
font-size: 10px;
}
<div id="til-container">
<div id="til-header">
<div id="til-date-container">
<div id="til-date">
<span id="til-day">25</span>
<br/>
<span id="til-month">dec</span>
</div>
</div>
</div>
</div>