I'm using flex to build footer. I want the footer to be 60% of the width of the website and centered which is working perfectly. When I add content into the footer of text, links, and image links and try to justify space-evenly it doesn't work properly and there is a lot of extra white space on the right side within the footer. How do I remove it?
Footer
CSS
.site-wide-footer {
display: flex;
flex-wrap: wrap;
width: 60%;
height: auto;
border: 2px solid black;
border-radius: 24px;
color: white;
background-color: black;
margin: auto;
justify-content: space-between;
align-items: center;
}
HTML
<footer>
<div class="site-wide-footer">
<p>© 2018 copyright</p>
<p> ♦STORE</p>
<p>♦ABOUT US</p>
<p>♦SITEMAP</p>
<div class="social-footer">
<p><a href="discord url">
<img src="images/Discord-Logo-White.png" alt="Discord Logo"
class="discord-footer" onmouseover="hover(this);"
onmouseout="unhover(this);"></a>
<a href="facebook url/"><img
src="images/facebook-icon.png" alt="Facebook Icon" class="facebook-
footer"></a></p>
</div>
</div>
</footer>
How about using justify-content: space-evenly; instead? It will also make sure the the child elements are still centered even when it is wrapped over to the next line.
I think you might want to consider setting a flex rule for the flex-box children.
I'm not sure I understand what exactly you try to achive, but if you play with this flex rule, you can achieve a lot.
.site-wide-footer {
display: flex;
flex-wrap: wrap;
width: 60%;
height: auto;
border: 2px solid black;
border-radius: 24px;
color: white;
background-color: black;
margin: auto;
justify-content: space-around; /*you can play with it*/
align-items: center;
padding: 0 15px 0; /*fixed space on left and right of the flex-box*/
}
.site-wide-footer > { /*flex-box children */
flex: 1 0; /*play with this one a bit. you could also give it a minimum width like that: flex: 1 0 100px;*/
}`
And of course, you may find all the answers on this Complete Guide to Flexbox
Itamar
Related
Hobbyist who really sucks at css.
I have the following three divs:
The problem is, when I click on the middle one, the box grows, and so do the other two boxes:
How do I make boxes start off and stay the same size even after click. The reason the box is growing is do to adding the "arrow-icon"
Code looks like this:
HTML
<section class='modes-flex__options'>
<div class='options'>
<h2 class='options__title'>Options</h2>
<div class='options__item-container'id='1v1' onClick="selectedGameOption(this.id)">
<h3 class='options__item'>Player vs AI (1 v 1) </h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
<div class='options__item-container' id='1v1-tourny' onClick="selectedGameOption(this.id)">
<h3 class='options__item'>Player vs AI (Tournament)</h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
<div class='options__item-container' id='ai-v-ai-tourny' onClick="selectedGameOption(this.id)">
<h3 class='options__item' >AI vs AI (Tournament)</h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
</div>
</section>
CSS
.modes-flex{
display: flex;
margin-top: 3rem;
&__options{
flex:1;
display: flex;
justify-content: end;
}
&__description{
flex:1;
display: flex;
flex-direction: column;
}
}
.options{
margin-right: 5rem;
&__title{
font-size: 1.2rem;
padding-bottom:2rem;
}
&__item{
flex: 1;
padding-right: 5rem;
}
}
.description{
&__title{
font-size: 1.2rem;
padding-bottom:2rem;
}
}
.options__item-container {
padding: 1.5rem 1rem 1.5rem 1rem;
margin-bottom: 2rem;
box-shadow: 0 0 10px lightgrey;
border: 1px solid lightgrey;
display: flex;
align-items: center;
&:hover{
cursor: pointer;
}
}
.arrow-icon__div{
text-align: right;
}
.active-option{
background-color: $dark-navy;
color: white;
}
Tried to set min and max width and was still growing , just want them to stay even width after adding the icon.
You said it: The reason the box is growing is do to adding the "arrow-icon".
In my experience, in these situations, I always added to the default size of the boxes so that when another element (i.e. arrow-icon) is added, it doesn't change the size. (Because there is enough space in the box for arrow-icon to be added). With doing so, all the boxes remain the same through any actions.
I'm creating a div with some information, in the same way that the Coinbase website uses, but I'm facing a problem with styles, because I wanted this div to be responsive, horizontally aligned on larger devices and vertically aligned on smaller devices, but I don't know much about CSS, however, I believe that I need to use Flexbox, but I'm very new to what exactly to do
I would like this code to work exactly as it is on the Coinbase website. On larger devices the reproduction appears to be in rows, but on smaller devices it appears to be in columns, how do I do this? I use Bootstrap, is there no Bootstrap class that makes this easy?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background: dodgerblue;
}
.section {
display: flex;
flex-shrink: 0;
width: 100%;
max-width: 1180px;
margin: 0px auto;
padding: 24px;
}
.box {
display: flex;
flex: 1 1 auto;
flex-direction: row;
justify-content: center;
color: rgb(255, 255, 255);
margin: 40px 0px;
}
h2 {
margin: 0px 0px 12px;
line-height: 48px;
font-size: 56px;
font-weight: 500;
}
.divChild {
line-height: 24px;
font-size: 16px;
opacity: 0.7;
}
.divChildBox {
flex: 1 1 0%;
text-align: center;
flex: 1 1 0%;
text-align: center;
flex: 1 1 0%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<section class="section">
<div class="box">
<div class="divChildBox">
<h2>$320B+</h2>
<div class="divChild">Total Volume Traded</div>
<div class="divChildBox">
<h2>100+</h2>
<div class="divChild">Countries supported</div>
<div class="divChildBox">
<h2>35M+</h2>
<div class="divChild">Verified users</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
I think you are looking to display your content in a row rather than a column. Using flex, simply add all your display items into div child elements. Flex by default aligns horizontally so there is no need to define a direction unless you are changing the direction. So the h2 and divs that hold the smaller text can live in a div, then the parent div should have the flex display and you can add any other flex properties to the parent element.
So on the parent class, I added display: flex; justify-content: space-around; align-content: center;. I also added p tags instead of divs as this will help to reduce any confusion in your html.
Note that by adding the class to the parent, you can reference the parent element and any of its children using CSS, this allows me to affect multiple elements with one block of code. Example .parent h2 or .parent p. the HTML looks much cleaner.
As to the responsiveness with flex... the flex value is an alternative to block elements floated and manipulated using media queries. Instead, developers can build a flexible container, flexbox for short. It's great for mobile screens and responsive content for dynamic layouts and webapps. Adding media queries in your CSS will allow your app/site to be more responsive. I suggest having a look at the following article on media queries by a well respected site called CSS Tricks, there are alot of media devices out there and building a responsive app/site will need thought out css to accommodate css media queries.
Let me know if this was not what you were looking to achieve.
* {
margin: 0;
padding: 0;
}
#main section div {
color: rgb(255, 255, 255);
margin: 40px 0px;
}
.parent {
display: flex;
justify-content: center;
align-content: center;
}
.parent h2 {
margin: 0px 0px 12px;
line-height: 48px;
font-size: 56px;
font-weight: 500;
}
.parent p {
line-height: 24px;
font-size: 16px;
opacity: 0.7;
}
#media (max-width:499px) {
#main section div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#main {
display: flex;
flex-direction: column;
justify-content: center;
}
.parent {
flex-direction: column;
justify-content: center;
align-content: center;
}
}
<div id="main" style="background: rgb(22, 82, 240);">
<section style="width: 100vw; padding: 24px">
<div>
<div class="parent">
<div>
<h2>$320B+
</h2>
<p>
Total Volume Traded
</p>
</div>
<div>
<h2>
100+
</h2>
<p>Countries supported
</p>
</div>
<div>
<h2>
35M+
</h2>
<p>
Verified users
</p>
</div>
</div>
</div>
</section>
</div>
I also suggest separating your HTML and CSS. You have a lot of in line style that is repeating, use classes for this. You define the class once in your css file or style tag, then add the class to the class attribute in your HTML. Then if you need to change it, you're only changing it once in your CSS.
I'm trying to use flexbox (justify-content: space-between;) to push the Motorola logo to the left and the red block (nav-bar) to the right. It actually works pretty well as long as there is no anchor tag involved. However, I need anchor tags so that visitors can actually click on each item of the nav-bar and get to the respective section of the website.
How can I make justify-content work without removing the anchor tags?
HTML
<div id="header">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Motorola_Logo_White.png" alt="This is Motorolas Logo">
<div id="nav-bar">
<div id="nav1" class="nav-link"><a href="#prices">Prices</div>
<div id="nav2" class="nav-link"><a href="#prices">Specs</div>
<div id="nav3" class="nav-link"><a href="#prices">Reviews</div>
</div>
</div>
CSS
#header {
background-color: gray;
position: fixed;
justify-content: space-between;
z-index: 1;
display: flex;
width: 100%;
height: 4rem;
}
#header-img {
background-color: orange;
height: 4rem;
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
#nav-bar {
background-color: red;
width: 25%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
Here you can see it on Codepen
In cases where you have a flex container with left-aligned content - except one or more items you want to right-align, there is a shortcut using the margin property.
If you add the following rule to your existing styles:
#nav-bar {
margin-left: auto; /* Pushes the element right inside a flex container */
}
It should work as you want. You could even remove the justify-content: space-between; rule from your #header selector.
I'm using flexbox to make my footer stick to the bottom, and for the most part it's working. My problem is, I need the content to be within a specified width, that I set with max-width and center with margin-left:auto; and margin-right:auto;. When I activate flexbox, the contents are squished by the margin-left and margin-right rules, and do not take up the space defined by max-width. I would like to know why this is happening and how to get my footer to look how I want it to look.
Here is how I want my footer to look:
And here is how flexbox is affecting it:
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
If I change max-width to width then it works, but then when I test it in my browser using the device-mobile setting to see how it would look on a mobile device, the width property makes the footer too big and messes up the content. If I take out the margin-left and margin-right properties, then my footer looks like this:
As you can see it's no longer centered. I can't use the flex-basis property because that only affects the height of the footer. Please help.
Edit
Here is a snippet with margin-left and margin-right taken out and replaced with display:flex; and justify-content:space-around;. Be sure to click "Full page" to view with a larger viewport.
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
display: flex;
justify-content: space-around;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
This can be done easily with justify-content: space-between;, but looking at your code I feel you may misunderstand a bit how Flexbox itself works. You want your footer to act as a flex container so you can manipulate the child spans as well.
Consider checking out freeCodeCamp's Flexbox Challenges to get a better idea how Flexbox works.
EDIT: CodePen now reflects what OP was meaning to immitate.
Here's a CodePen to play around with.
What this does is makes your footer both a child and container.
First your body becomes a container to allow the main content to grow to fill the space pushing your footer to the bottom of the page. The flex-direction is set to column to flow vertically.
You create a wrapper for your footer, because currently your footer is in the body container which is set to flex-direction:column; where in this case, you want the direction to be row to style horizontally. By default display:flex; will assume you wanted row so direction doesn't need declared. We then justify-content to the center so no matter the width the footer itself will be centered.
You treat your <footer> as both a child and container. As a child we tell it not to grow or shrink and set the basis to auto. As a container, we tell it to distribute space-between its children which allows a consistently equal amount of space between the left & right spans.
body {
display: flex;
height: 100%;
flex-direction: column;
}
.main {
flex: 1 0 auto;
border: 1px solid #000;
}
.wrapper {
display: flex;
justify-content: center;
}
footer {
flex: 0 0 auto;
display: flex;
margin: 1em;
width: 80%;
border: 1px solid #000;
justify-content: space-between;
}
<body>
<div class="main">
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
</div>
</body>
<div class="wrapper">
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
</footer>
</div>
I gave up trying to get this to center with flexbox. Instead I used the calc function to calculate the padding-left and padding-right of my <footer> tag. Here is what I came up with (I'm using 47.5rem instead of 67.5rem because I think it's easier to see the behavior).
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
display: flex;
align-items: center;
padding-left: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-right: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
#left {
flex: 1;
order: 1;
}
#mid {
flex: 0 0 auto;
order: 2;
}
#icons {
order: 3;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
I'm trying to center horizontally (img - .info - img) using space-between property. I'm facing a little issue the space-between doesn't add spaces between elements.
I know I'm missing something but I can't figure it out!
HTML:
<ul>
<li class="box-match">
<a href="#">
<img src="http://lorempixel.com/20/21" class="team1" alt="">
<div class="info">
<span class="time">10:30</span>
<span class="score">0-2</span>
</div>
<img src="http://lorempixel.com/20/20" class="team2" alt="">
</a>
</li>
</ul>
CSS:
a{
text-decoration: none;
width: 98px;
height: 40px;
display: flex;
flex-flow: row no-wrap;
align-items: center;
align-content: space-between;
background-color: lightgray;
}
.info{
text-align: center;
display: block;
width: 40px;
}
ul{
list-style: none;
}
http://codepen.io/eldev/pen/EaQJvR?editors=110
You are looking for justify-content: space-between.
Updated Example
MDN justify-content
The CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with flex-grow different than 0, it will have no effect as there won't be any available space.
a {
text-decoration: none;
width: 98px;
height: 40px;
display: flex;
flex-flow: row no-wrap;
align-items: center;
justify-content: space-between;
background-color: lightgray;
}
In my case one of the flex items had a margin-left: 100px; set. Removing it fixed the problem.
Try to add a width to your ul, if no width no space to let between.