trying to center .follow-btn using justify-content:center; [duplicate] - css

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}
header .follow-btn {
display: flex;
justify-content:center;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>#ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
So my question is, before I add Justify-content:center; to header .follow-btn, the button remains ont he left, if I add any justify type of data to this it goes to the right. Wether I use center or whatever. My question is Why?. I'm trying to learn the basics and this is a bit confusing considering I just finished the course stating that justify content center should push it to the middle of the x axis, but isn't.

You are having: margin: 0 0 0 auto; into header .follow-btn that will align your button to the right because it will add a full margin to the left no matter what as your header is set with display:flex;.
Make margin like: margin: auto 0; if you want to align it horizontaly.
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}
header .follow-btn {
display: flex;
justify-content:center;
margin: auto 0;
padding-left: 10px;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>#ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>

Related

Items are not aligned in the center

enter image description here
i am trying to align all the .features items in the center but for some reason only the first one is doing it. I do not find the reason, please help.
<section>
<div class="features">
<div><i class="fa-solid fa-fire"></i></div>
<div>
<h2>Premium Materials</h2>
<p class="p-description">
Our guitars are built with the best amazonian wood
</p>
</div>
</div>
<div class="features">
<div>
<i class="fa-solid fa-truck-fast"></i>
</div>
<div>
<h2>Shipping</h2>
<p class="p-description">
We make sure you recieve your trombone as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="features">
<div><i class="fa-solid fa-user-check"></i></div>
<div>
<h2>Satisfaction</h2>
<p class="p-description">
For every purchase you make, we will ensure there are no damages or
faults and we will check and test the quality of your instrument.
</p>
</div>
</div>
</section>
css
body {
background-color: #eff1ed;
font-family: "Roboto", sans-serif;
}
/* Header and nav bar */
header {
display: flex;
}
.logo-guitar {
padding: 2% 1% 3% 2%;
}
.luthier-name {
width: 100%;
padding: 1.5% 0 0 1%;
}
#nav-bar {
display: flex;
text-align: center;
justify-content: space-between;
flex-direction: row;
}
.nav-link {
width: 94px;
text-align: center;
margin: 2px auto;
padding-top: 15%;
color: #131b23;
text-decoration: none;
font-weight: bold;
}
h1 {
font-family: "Satisfy", cursive;
font-size: 3rem;
}
/* email form */
.email-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#email {
height: 25px;
width: 100%;
}
#submit {
width: 80%;
margin-top: 5%;
background-color: #ffe121;
border: 0;
font-weight: bold;
height: 35px;
font-family: inherit;
font-size: large;
}
/* Features */
.fa-solid {
color: #e3170a;
font-size: 50px;
}
.features {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.p-description {
width: 80%;
}
section {
padding-top: 10%;
}
If all them have the same class i do not understan why this is happening. I was trying to uso console to find the reason but i'm stuck.
It seems that the .p-description has a width based on its content (it is set in percentage, but its container also does not have a defined width), therefore it gets wider with more text inside, which result in unexpected different looks.
You can define width of .p-description with a value independent to its content and it should make them have same width, such as in px, em, vw, or vh.
Example:
.p-description {
max-width: 350px;
}
Or the layout of its container and parent container can be adjusted to properly contain various length of content in .p-description, but it does take a bit more of refactoring.
Hope that it helps!

CSS Flex and transformed text

I am trying to get this kind of effect to display a date
I am using flex and text transform, but am struggling to get it right. I cannot get rid of the extra width to the right of the year.
This is my current result.
Here is my code:
.event {
display: flex;
gap: 20px;
margin-bottom: 5px;
}
.date {
border-radius: 5px;
letter-spacing: 1.2px;
background-color: #f6f5f0;
color: #d8d6c8;
padding: 5px;
}
.date .dayAndMonth {
display: inline-block;
}
.date .month {
text-align: center;
font-size: 13px;
}
.date .day {
text-align: center
}
.date .year {
display: inline-block;
transform-origin: 0 0;
transform: rotate(-90deg);
position: relative;
top: 18px;
}
.event_details {}
<article class="event">
<div class="date">
<div class="dayAndMonth">
<div class="month">Feb</div>
<div class="day">04</div>
</div>
<div class="year">2022</div>
</div>
<div class="event_details">
<div class="title">Event Title</div>
</div>
</article>
I would recommend to use writing-mode: vertical-lr; for more details
.event {
display: flex;
gap: 20px;
margin-bottom: 5px;
}
.date {
border-radius: 5px;
letter-spacing: 1.2px;
background-color: #f6f5f0;
color: #d8d6c8;
padding: 5px;
/*Added css*/
display: flex;
align-items: center;
}
.date .dayAndMonth {
display: inline-block;
}
.date .month {
text-align: center;
font-size: 13px;
}
.date .day {
text-align: center;
}
.date .year {
display: inline-block;
writing-mode: vertical-lr; // use this css
position: relative;
}
.event_details {}
<article class="event">
<div class="date">
<div class="dayAndMonth">
<div class="month">Feb</div>
<div class="day">04</div>
</div>
<div class="year">2022</div>
</div>
<div class="event_details">
<div class="title">Event Title</div>
</div>
</article>
It's because of position relative that anchors .year in the .date container. It will still take space there as it is relative to that position making the container adjust it's dimension to accommodate the .year. There're two ways that I can think of. First, is fix the dimensions of .date: height and width then reposition the right and top of the .year. Or you could just use position: absolute; on .year, just set the parent container's width: 50; and adjust the top property to reposition. See the snippet below:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.event {
display: flex;
gap: 20px;
margin-bottom: 5px;
padding: 1rem;
}
.date {
border-radius: 5px;
letter-spacing: 1.2px;
background-color: #f6f5f0;
color: #d8d6c8;
padding: 5px;
width: 50px;
}
.date .dayAndMonth {
display: inline-block;
}
.date .month {
text-align: center;
font-size: 13px;
}
.date .day {
text-align: center
}
.date .year {
display: inline-block;
transform-origin: 0 0;
transform: rotate(-90deg);
position: absolute;
top: 55px;
}
.event_details {}
<article class="event">
<div class="date">
<div class="dayAndMonth">
<div class="month">Feb</div>
<div class="day">04</div>
</div>
<div class="year">2022</div>
</div>
<div class="event_details">
<div class="title">Event Title</div>
</div>
</article>
More on positions here.
Solution
Add a value for width to .year in your CSS. That is
.date .year {
/* ... (other styles) */
width: 20px; /* newly added value for width */
}
Explanation
On rendering your HTML/CSS code, the browser kind of calculates the widths of elements. At this point, the width of the .year div (containing 2022) has been set. After the rotation is rendered, the width was still retained hence the extra space at the right.
So explicitly setting the width removes the extra space to the right of the vertical 2022.
Note
You may want to set the font sizes of .month, .day, and .year to be sure that their values are not distorted or superimposed on each other when your page is rendered in a browser where the user has scaled up font sizes.

Trying to add margin-top to separate the heading from the rest of the content

I am trying to add margin-top to separate the heading from the rest of the content, but every time I do so the content moves down more. I used a flexbox to center the items, but I can't add margin-top to it because when I do it affects the flexbox property I added to it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.8%;
}
body {
background: #FFF8DC;
}
.wrapper-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content-content h2 {
font-size: 2.1rem;
}
p {
font-size: 1.3rem;
}
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>
I'm not sure if I understood you right. to separate heading from the rest you need margin-bottom as I added in the snippet .
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.8%;
}
body {
background: #FFF8DC;
}
.wrapper-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content-content h2 {
font-size: 2.1rem;
margin-bottom:2rem;
}
p {
font-size: 1.3rem;
}
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>
Another way to do it is by simply adding a break
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<br>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>
Use margin-bottom:20px; or padding-bottom:20px; to the h2 element to separate the heading from rest of the content in your flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.8%;
}
body {
background: #FFF8DC;
}
.wrapper-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content-content h2 {
font-size: 2.1rem;
padding-bottom:20px;
}
p {
font-size: 1.3rem;
}
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>

Align footer horizontally

I have a small problem with my footer for a website I have made. So there is 2 sections:
- On the top: .footer-sections with 3 div
- On the bottom: .footer-bottom with just a p
image here
I figured out what is the problem but I don't know how to fix it: the first child of .footer-sections is denser and it is taking more than 1/3 of the space (I am guessing).
.footer {
text-align: center;
background-color: #333;
color: #fff;
padding: 50px;
bottom: 0;
width: 100%;
}
.footer .footer-sections {
display: flex;
justify-content: space-between;
}
.footer .footer-sections div {
padding: 2rem 0rem;
top: 0;
}
.footer .footer-sections p {
font-size: 14px;
}
.footer .footer-bottom {
text-align: center;
}
.footer .footer-bottom p {
font-size: 14px;
}
.footer ul {
list-style: none;
}
.footer ul li {
font-size: 14px;
color: #fff;
}
<div class="footer">
<div class="footer-sections">
<div class="adress-footer">
<h4>Contact</h4>
<p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
<p>+33 6 24 15 14 02</p>
<p>contact#hrasia.com</p>
</div>
<div class="menu-footer">
<h4>Operating Hours</h4>
<p>Monday - Friday : 8 a.m - 5 p.m</p>
<p>Saturday : 9 a.m - 1 p.m</p>
<p>Sunday : closed</p>
</div>
<div>
<h4>Blog</h4>
<p>Read our latest posts</p>
<p>How to write a resume ?</p>
<p>The interview process</p>
</div>
</div>
<div class="footer-bottom">
<p>© hrasia.com | Designed by Lorem</p>
</div>
</div>
You can easily fix that using flex;
just add
.footer .footer-sections div{
// Thanks to Rickard Elimää
max-width: calc(100% / 3)
}
This would solve your issue.
You can check it here as well : https://codepen.io/bhanusinghR/pen/bGbqdbm?editors=1100
First off: because you got padding, flex needs to know about the width of the div, excluding the padding, so you need to add box-sizing: border-box to take that into account.
You also need to tell the footer sections that they should take out an equal amount of space. You do that by adding flex: 1 to them.
I also added border: 1px solid #fff to make it a little bit easier to see the result. Try removing box-sizing: border-box from .footer to see the difference.
.footer {
text-align: center;
background-color: #333;
color: #fff;
padding: 50px;
bottom: 0;
width: 100%;
box-sizing: border-box; /* ADDED */
}
.footer .footer-sections {
display: flex;
justify-content: space-between;
}
.footer .footer-sections div {
padding: 2rem 0rem;
top: 0;
border: 1px solid #fff;
flex: 1; /* ADDED */
}
.footer .footer-sections p {
font-size: 14px;
}
.footer .footer-bottom {
text-align: center;
}
.footer .footer-bottom p {
font-size: 14px;
}
.footer ul {
list-style: none;
}
.footer ul li {
font-size: 14px;
color: #fff;
}
<div class="footer">
<div class="footer-sections">
<div class="adress-footer">
<h4>Contact</h4>
<p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
<p>+33 6 24 15 14 02</p>
<p>contact#hrasia.com</p>
</div>
<div class="menu-footer">
<h4>Operating Hours</h4>
<p>Monday - Friday : 8 a.m - 5 p.m</p>
<p>Saturday : 9 a.m - 1 p.m</p>
<p>Sunday : closed</p>
</div>
<div>
<h4>Blog</h4>
<p>Read our latest posts</p>
<p>How to write a resume ?</p>
<p>The interview process</p>
</div>
</div>
<div class="footer-bottom">
<p>© hrasia.com | Designed by Lorem</p>
</div>
</div>

Flexbox: while a group of items is at the very center of the page, put at single item at the bottom

I have used Bootstrap 4 and some custom CSS to make a hero section with all its items but one centered horizontally and vertically.
The exception is one item I want to align at the bottom of the page and still keep it centered horizontally.
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
a.inherit {
color: inherit;
}
a.nounderline, a.nounderlie:hover {
text-decoration: none;
}
.page-wrapper {
min-height: 100%;
}
.hero {
height: 100vh;
overflow-y: hidden;
padding-top: 3rem;
padding-bottom: 3rem;
justify-content: center;
align-items: center;
}
.hero img {
width: 100%;
}
.hero.type-text h1 {
color: #000;
}
.hero.hero-short {
max-height: 768px;
}
section.type-text h3 {
font-weight: bold;
font-size: 2rem;
margin-bottom: 0;
}
section.type-text h4 {
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
margin-top: 1.5rem;
}
section.type-text p {
font-weight: 500;
}
.allcases {
text-align: center;
font-weight: 700;
margin-top: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
<section class="container d-flex hero type-text">
<div>
<h4 class="text-center m-0">Next item</h4>
<h1 class="display-1 text-center">
<a class="inherit nounderlie" href="#">Lorem</a>
</h1>
</div>
<p class="allcases">
<a class="inherit" href="#">See all items</a>
</p>
</section>
</div>
"See all items" does stay to the bottom (thanks to margin-top: auto), but it is not centered. Changing the flex-direction from row to column messes the whole layout so it is not the way to go.
What is viable solution?
You should be using flex-direction: column for this. This is an ideal use-case for it. Using row layout to achieve what you want, i.e. have the items horizontally centered is not viable. You'd be better off not using flex at all, and using margins instead. If you really wish to use flex-direction: row then the only solution I can think of is either to use position: absolute or a negative margin. Wouldn't recommend it though, since what you want can so easily be accomplished just by using flex-direction: column.
Here is the result I achieved just by changing 2 properties.
Update styling to
// Only added flex-direction: column to this
.hero {
height: 100vh;
overflow-y: hidden;
padding-top: 3rem;
padding-bottom: 3rem;
justify-content: center;
align-items: center;
flex-direction: column;
}
// This is to target the first div, i.e. the div that contains next item and Lorem, since the div doesn't have a class.
.hero > div {
margin-top: auto;
}
The answer is rather simple. Change the flex-flow of your container to column.
flex-flow:column;
Now you have two flex-items: The div, containing your Title and the other links and the footer-p. The first trick is to make your div grow, while the p-tag stays the same. So assign
flex: 1 auto;
to your div and
flex: 0 auto;
to your p-tag.
After doing so you have to add
display: flex;
justify-content: center;
flex-flow: column;
to your div, too. Making it a flex-box itself.
Your p-tag doesnt require more attention, you can also remove the unnecessary margins.
This should do the trick.
You need to allow wrapping and set a width to the div suppose to stand at top
to allow wrapping, use a class
<section class="container d-flex hero type-text flex-wrap">
for the di, you can do :
.hero>div {
width:100%;
}
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
a.inherit {
color: inherit;
}
a.nounderline, a.nounderlie:hover {
text-decoration: none;
}
.hero {
height: 100vh;
overflow-y: hidden;
padding-top: 3rem;
padding-bottom: 3rem;
justify-content: center;
align-items: center;
}
.hero>div {
width:100%;
}
.hero img {
width: 100%;
}
.hero.type-text h1 {
color: #000;
}
.hero.hero-short {
max-height: 768px;
}
section.type-text h3 {
font-weight: bold;
font-size: 2rem;
margin-bottom: 0;
}
section.type-text h4 {
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
margin-top: 1.5rem;
}
section.type-text p {
font-weight: 500;
}
.allcases {
text-align: center;
font-weight: 700;
margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
<section class="container d-flex hero type-text flex-wrap">
<div>
<h4 class="text-center m-0">Next item</h4>
<h1 class="display-1 text-center">
<a class="inherit nounderlie" href="#">Lorem</a>
</h1>
</div>
<p class="allcases">
<a class="inherit" href="#">See all items</a>
</p>
</section>
</div>
Another option is to use the flex-column class
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
a.inherit {
color: inherit;
}
a.nounderline, a.nounderlie:hover {
text-decoration: none;
}
.hero {
height: 100vh;
overflow-y: hidden;
padding-top: 3rem;
padding-bottom: 3rem;
justify-content: center;
align-items: center;
}
.hero img {
width: 100%;
}
.hero.type-text h1 {
color: #000;
}
.hero.hero-short {
max-height: 768px;
}
section.type-text h3 {
font-weight: bold;
font-size: 2rem;
margin-bottom: 0;
}
section.type-text h4 {
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
margin-top: 1.5rem;
}
section.type-text p {
font-weight: 500;
}
.allcases {
text-align: center;
font-weight: 700;
margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
<section class="container d-flex flex-column hero type-text ">
<div>
<h4 class="text-center m-0">Next item</h4>
<h1 class="display-1 text-center">
<a class="inherit nounderlie" href="#">Lorem</a>
</h1>
</div>
<p class="allcases">
<a class="inherit" href="#">See all items</a>
</p>
</section>
</div>
in both example, margin of allcases is reset to :
margin: auto auto 0 auto;
to stick it at bottom of container, no matter the flex-direction.

Resources