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:
Related
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 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>
I have three elements in my HTML that I would like to arrange vertically (stacked if you will), regardless of size (which is dynamic for some of the elements).
I have tried using flexbox and the usual advice on the net but it does not seem to work.
.intro {
font-family: monospace;
font-size: 24px;
color: #455934;
padding-top: 25px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
align-self: flex-start;
}
.recipe {
background-color: rgba(255, 255, 255, .6);
margin: auto;
min-height: 400px;
height: auto !important;
height: 400px;
width: 75%;
box-sizing: border-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: flex-start;
-webkit-align-items: flex-start;
justify-content: left;
}
.recipe a:link,
a:visited,
a:active {
color: #cda44c;
font-family: monospace;
font-size: 18px;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
align-self: flex-start;
}
.recipe a:hover {
color: white;
align-self: flex-start;
}
.recipe_image {
padding-top: 5px;
}
<div class="recipe">
<p class="intro">
{{label}}
</p>
<a href='test.html'>
Rezept von {{source}}
</a>
<br>
<a href='test.html'>
<img src='C:/users/fabian.nguyen/03 - Customer Analytics/Bots/Flask Test/static/rock.gif' alt="TEST" class="recipe_image">
</a>
</div>
You can see the resulting HTML (rendered via Flask but that is not the issue) here:
https://nachhaltig-kochen.herokuapp.com/getrecipe
Instead of stacking into a column (1. Label 2. Text-Link 3. Image-Link) they arrange in a row of equally sized divs.
EDIT:
Thanks to Pete, the solution is simply to remove any flex box reference as the elements should (and do) naturally stack vertically without any other style.
I am using LESS (CSS) trying to align a span (button text) inside a div (button). The span is centrally aligned horizontally but is top aligned vertically. I would also like the span object to adjust itself to the text size automatically.
Here's the LESS code:
.button(#color:#crimson-red) {
border-radius: #small-border-radius;
border-style: none;
background-color: #color;
text-align: center;
display: inline-block;
}
.button-font {
vertical-align: middle;
overflow: auto;
font-family: "Helvetica Neue", sans-serif;
color: #off-white;
font-weight: bold;
font-size: 10pt;
position: relative;
}
.blue-button {
.button(#blue);
}
You can achieve this by using the flexbox layout.
So by adding the following properties and values to the .button selector you can center the span.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
Here is the full less file for reference.
#off-white: #fefefe;
#blue: #4286f4;
#small-border-radius: 5px;
.button(#color:#crimson-red) {
border-radius: #small-border-radius;
border-style: none;
background-color: #color;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button-font {
font-family: "Helvetica Neue", sans-serif;
color: #off-white;
font-weight: bold;
font-size: 10pt;
position: relative;
}
.blue-button {
.button(#blue);
width: 300px;
height: 100px;
}
This would be the html:
<button class="blue-button">
<span class="button-font">Hello, lots of text here</span>
</button>
Here is a link to a JSFiddle with compiled css.