I'm trying to create a rock, paper, scissors game and I'm having trouble getting the items to stack. I have three images on one row and I would like to display the fourth image below them (this image would be the resulting image displaying either rock, paper or scissors).
I tried using flex-wrap, changing width's, etc and after an hour of searching, I figured I'll just ask you guys who will probably solve it in a minute lol Here is my code and thanks in advance for the help :D
#import url("https://fonts.googleapis.com/css?family=Germania+One");
$primary-color: #000000;
$serif: "Germania One",
cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
#rock,
#paper,
#scissor {
display: flex;
justify-content: center;
border-radius: 20px;
cursor: pointer;
}
#scissor {
margin-left: 30px;
padding-left: 10px;
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
justify-content: center;
width: 50%;
height: auto;
flex-wrap: wrap;
border-radius: 20px;
cursor: pointer;
}
#scissor_win {
margin-left: 30px;
padding-left: 10px;
}
<h1>Rock, Paper, Scissor's</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'><img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png' /> </div>
<div id='paper'><img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png" /> </div>
<div id='scissor'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<div id='scissor_win'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<p></p>
The display: flex; setting needs to be applied to the container/parent element, not to the flex-items/children.
Since you have a structure of .container as a container for items and #scissor_win, and items again contains three items-to-be stacked, the CSS rules should (partly) look like this:
.container {
display: flex;
flex-direction: column;
}
.items {
display: flex;
flex-direction: column;
}
The single items don't need display: flex, unless you want to center their contents using flex.
Make sure you close your img's. They are missing the ending bracket.
The display: flex goes on the container, and the children all get a flex assigned to them (Flex Guide).
I added the SASS tag, since it seems you're using that
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
.items {
display: flex;
}
#rock,
#paper,
#scissor {
flex: 1;
/* justify-content: center; */
border-radius: 20px;
cursor: pointer;
}
#scissor {
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
margin: 0 auto;
clear: both;
width: 50%;
height: auto;
border-radius: 20px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'>
<img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png'>
</div>
<div id='paper'>
<img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png">
</div>
<div id='scissor'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<div id='scissor_win'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<p></p>
</body>
</html>
I'm having trouble posting my inline code here with SCSS, so here's a jsbin link in addition. jsbin
using #kauffee000 snippet, I reduced the amount of css required.
Hope it helps.
explanation:
the trick here is to make .container be a flex and have a flex-direction of column, while .items be flex with a flex-direction of row.
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
img {
height: 13rem;
}
}
.items {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
& div {
border-radius: 20px;
flex: 1;
&:hover {
img {
height: 5rem;
}
}
}
}
Related
it is making me crazy.
I have a nav bar where there are three div.
Each div has some text that is aligned at center both vertically and horizontally.
When I put an image ( is a svg icon of a zoom lens ) before the "search" text, it moves my text "search" at the bottom.
This is the code:
HTML
<nav>
<div id="leftside">
<img src="img/zoom-lens.png" alt="search">
search
</div>
<div id="middle">
Arkadomundo
</div>
<div id="rightside">
Sign Up
</div>
</nav>
CSS
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
}
#leftside img {
height: 50px;
}
#middle{
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
I guess it's an easy problem for you but honestly I cant find the why it happens
Your #leftside div won't automatically align its contents. Add display: flex; align-items: center; to it too, and everything will be centered vertically:
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
display: flex;
align-items: center;
}
#leftside img {
height: 50px;
}
#middle {
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
<nav>
<div id="leftside">
<img src="https://picsum.photos/80/120" alt="image"> search
</div>
<div id="middle">
Arkadomundo
</div>
<div id="rightside">
Sign Up
</div>
</nav>
Try adding display: inline-block; on your CSS for #leftside img
#leftside img {
height: 50px;
display: inline-block;
}
for fixing this, make #left-side flex container and set align-items property to
center because #left-side child's get centered. Or copy this CSS codes:
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
display: flex;
align-items: center;
}
#leftside img {
height: 50px;
}
#middle{
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
it s working if I put display flex and align items also on #leftside !
Thank you !
I have created on dashboard page which using css style
But i want to make logout button in top right corner using css like this image using css
How can we do that logout button in right corner top using css?
I tried to do that but it did not happen
CSS:
.dashboard {
height: 100vh;
width: 100vw;
/* display: flex; */
align-items: center;
justify-content: center;
}
.dashboard__container {
display: flex;
flex-direction: column;
text-align: center;
background-color: #dcdcdc;
padding: 30px;
height: 100vh;
width: 100vw;
}
.dashboard__btn {
padding: 10px;
font-size: 18px;
margin-top: 10px;
border: none;
color: white;
background-color: black;
}
.dashboard div {
margin-top: 7px;
}
the html render code
return (
<div className="dashboard">
<div className="dashboard__container">
welcome
<div>{name}</div>
<div>{user?.email}</div>
<button className="dashboard__btn" onClick={logout}>
Logout
</button>
</div>
</div>
);
I think this might work
.dashboard__btn {
position: absolute;
right: 10px;
padding: 10px;
font-size: 18px;
margin-top: 10px;
border: none;
color: white;
background-color: black;
}
you can do this I am just not sure if it's the best practice, I am also a beginner,
.welcome { position: absolute; } //in css
and
<div className="welcome">welcome</div> //in react
Is this what you want?
Just removed some code which does nothing and added justify-content: space-between; to the dashboard__container and that does the trick
.dashboard {
height: 100vh;
width: 100%;
background: #3e295a;
}
.dashboard__container {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
background-color: #7015b8;
padding: 1em 20px 1em 20px;
color: white;
font-weight: bold;
}
.dashboard__btn {
margin-top: -5px;
font-size: 18px;
padding: 0.25em 0.5em;
border: none;
color: white;
background-color: #402958;
}
<div class="dashboard">
<div class="dashboard__container">
Welcome
<div>{name}</div>
<div>{user?.email}</div>
<button class="dashboard__btn" onclick="{logout}">
Logout
</button>
</div>
</div>
Tell me if its not working...
This is my code which works - used vehicle platform - HTML with flex, but isn't quite esthetically pleasing:
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.itemwrapper1 img {}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
width: 600px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
margin-left: -450px;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
margin-left: -200px;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Car , Van, Caravan Dealer | Quality Used Cars</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header class="infog">
header
</header>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
black
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac1'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
rowtt
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column at1'>
<h3>2004 TOYOTA RAV4 2.0</h4>
black
</div>
<div class='column priceh'>
<h3>£6000</h4>
</div>
</div>
</div>
<footer class="infog">
footer
</footer>
</body>
</html>
The problem is that I'm trying to make it so that if the image is large it's still alongside the text, like this from my page:
The blue line below is actually a bit of the next image... I didn't screencap well.
I've not figured out how to with the CSS and max-width size to do this, resulting in:
The car description in the second flexbox (column and ncat classes) doesn't show up.
But it works fine with the smaller image; I'm trying to make it big enough for people to see.
This isn't the final version, as I'm adding Roboto font etc. in the CSS, but it's almost working.
I'd much appreciate any advice on how to ensure I can get this to work in flexbox.
Just update your CSS with the following code
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
Hope someone can shed light on this question of mine.
I have a flex container, which has 2 flex containers with flex-direction: column.
However, it all displays in 1 column.
Initially, it displayed in 2 columns but did not start at the same height, and now it is in one column only.
Advise here will be appreciated.
<!-- ***** finding container ***** -->
section.finding-container {
top: 180px;
display: flex;
flex-direction: row;
position: absolute;
justify-content: space-between;
align-items: center;
/* height: 100% */
/* margin-right: 215px; */
}
.find-agent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 350px;
margin-bottom: auto;
margin-left: 50px;
}
.find-agent img,
h1,
p,
button {
display: block;
margin-left: auto;
margin-right: auto;
}
.find-agent h1 {
font-weight: 550;
color: #1E95EE;
text-align: center;
margin-top: 12px;
margin-bottom: 0;
}
.find-agent p {
color: #3A3C3E;
font-weight: 350;
width: 445px;
height: 71px;
text-align: center;
opacity: 1;
}
.try {
border: 2px solid #1E95EE;
border-radius: 5px;
opacity: 1;
color: #1E95EE;
font-size: 18px;
font-weight: Regular;
height: 50px;
width: 143px;
text-align: center;
vertical-align: middle;
text-decoration: none;
justify-content: center;
}
.agent-profiles {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0;
margin-bottom: auto;
}
.agent-profiles h2,
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.agent-profiles h2 {
font-weight: 350;
color: #1E95EE;
text-align: center;
width: 182px;
height: 44px;
letter-spacing: 0;
opacity: 1;
}
```
<!-- ***** finding container ***** -->
<section class="finding-container">
<div class="find-agent">
<img src="./images/search.svg" alt="search">
<h1>Find the perfect agent</h1>
<p>
No more browsing through thousands of applications. Each week, we'll send you a fresh batch of hand-picked, personally-vetted candidates.
</p>
<button type="button" class="try">Try today</button>
</div>
<div class="agent-profiles">
<h2>
Selections from the Overpass Marketplace
</h2>
<img src="./images/profiles.svg" alt="profiles">
</div>
</section>
I have a flex container, which has 2 flex containers with flex-direction: column.
You've got an invalid comment in your CSS, which is breaking your first line of code:
<!-- ***** finding container ***** -->
section.finding-container {
top: 180px;
display: flex;
flex-direction: row;
position: absolute;
justify-content:space-between;
align-items: center;
/* height: 100% */
/* margin-right: 215px; */
}
That's HTML commenting syntax. In CSS, it's invalid, so the following section.finding-container selector is seen as an error and ignored. The container then falls back to its default layout model, display: block, which stacks child elements vertically. (You can see the proper CSS commenting syntax at the bottom of your rule.)
More details about CSS commenting syntax and error handling:
Why are some of my CSS rules not working?
Initially, it displayed in 2 columns but did not start at the same height ...
You've got all sorts of margins and alignment properties (such as justify-content) set on the items and container, so they're rendering at different heights.
section.finding-container {
/* top: 180px; */
display: flex;
flex-direction: row;
position: absolute;
justify-content: space-between;
/* align-items: center; */
border: 2px dashed red; /* for illustration purposes */
padding: 10px; /* for illustration purposes */
}
.find-agent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* margin-top: 350px; */
/* margin-bottom: auto; */
/* margin-left: 50px; */
border: 1px solid green; /* for illustration purposes */
}
.find-agent img,
h1,
p,
button {
display: block;
margin-left: auto;
margin-right: auto;
}
.find-agent h1 {
font-weight: 550;
color: #1E95EE;
text-align: center;
margin-top: 12px;
margin-bottom: 0;
}
.find-agent p {
color: #3A3C3E;
font-weight: 350;
width: 445px;
height: 71px;
text-align: center;
opacity: 1;
}
.try {
border: 2px solid #1E95EE;
border-radius: 5px;
opacity: 1;
color: #1E95EE;
font-size: 18px;
font-weight: Regular;
height: 50px;
width: 143px;
text-align: center;
vertical-align: middle;
text-decoration: none;
justify-content: center;
}
.agent-profiles {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0;
/* margin-bottom: auto; */
border: 1px solid black; /* for illustration purposes */
}
.agent-profiles h2,
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.agent-profiles h2 {
font-weight: 350;
color: #1E95EE;
text-align: center;
width: 182px;
height: 44px;
letter-spacing: 0;
opacity: 1;
}
<section class="finding-container">
<div class="find-agent">
<img src="./images/search.svg" alt="search">
<h1>Find the perfect agent</h1>
<p>
No more browsing through thousands of applications.
Each week, we'll send you a fresh batch of hand-picked,
personally-vetted candidates.
</p>
<button type="button" class="try">Try today</button>
</div>
<div class="agent-profiles">
<h2>
Selections from the
Overpass Marketplace
</h2>
<img src="./images/profiles.svg" alt="profiles">
</div>
</section>
I'm trying to create a scrolling element without a fixed height parent. I want #SECTION1 of my code to be scrollable to show the rest of the images. I can't seem to find a way to do this. I've attempted to set #SECTION1 to a fixed height but it forces my images to be squashed. Any help would be appreciated. Thank you.
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
}
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
html,
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
/*----------SECTION 1----------*/
header {
height: 80px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#header-wrapper {
display: flex;
width: 55%;
justify-content: space-between;
align-items: center;
}
#logo {
width: 70px;
}
nav a {
color: white;
padding: 20px;
font-family: 'Roboto';
font-size: 0.8em;
font-weight: bold;
}
#media only screen and (max-width: 750px) {
nav {
display: none;
}
}
#mobile-menu {
color: white;
font-size: 1.3em;
}
#media only screen and (min-width: 750px) {
#mobile-menu {
display: none;
}
}
#body-wrapper {
display: flex;
height: 100%;
}
aside {
width: 300px;
height: 889px;
background-color: #0c0c0c;
display: flex;
align-items: center;
padding-top: 50px;
flex-direction: column;
}
#aside-wrap {
width: 70%;
}
#user-info {
display: flex;
margin: 10px;
margin-left: 0;
margin-bottom: 50px;
justify-content: center;
align-items: center;
font-family: 'Roboto';
font-weight: 400;
}
#user {
font-size: 40px;
color: white;
margin-right: 20px;
}
aside h3 {
color: white;
font-size: 1.2em;
}
#hello {
color: white;
font-size: 20px;
}
#box-1 {
color: #808080;
margin-bottom: 60px;
}
#box-1 p {
margin: 20px;
margin-left: 0;
font-family: 'Roboto';
font-size: 0.9em;
}
#box-2 {
color: #808080;
}
#box-2 p {
margin: 20px;
margin-left: 0;
font-family: 'Roboto';
font-size: 0.9em;
}
#section1 {
background-color: #191919;
/*background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),
url("listen_background.jpg");*/
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
overflow: auto;
}
#section1-wrapper {
width: 80%;
display: flex;
font-family: 'Roboto';
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
}
#section1 h1 {
color: white;
font-size: 3em;
margin-bottom: 50px;
text-align: center;
}
.image-box {
max-width: 280px;
margin: 20px;
}
img {
max-width: 100%;
}
#image-row-1,
#image-row-2,
#image-row-3,
#image-row-4 {
width: 100%;
margin-bottom: 50px;
display: flex;
justify-content: space-between;
}
#media only screen and (max-width: 1080px) {
#image-row-1,
#image-row-2,
#image-row-3,
#image-row-4 {
flex-direction: column;
align-items: center;
}
}
/*----------------SECTION 2--------------*/
#pusher {
height: 889px;
width: 300px;
}
#player {
height: 80px;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
#media only screen and (max-width: 750px) {
#player {
height: auto;
}
}
#player-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
}
#media only screen and (max-width: 750px) {
#player-wrapper {
flex-direction: column;
}
}
.button-controls {
color: white;
margin: 20px;
}
#player-bar {
width: 100%;
height: 3px;
background-color: white;
}
#player-filler {
width: 50%;
height: 100%;
background-color: #2A4B5A;
}
#timeline {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 750px) {
#timeline {
width: 100%;
}
}
#timeline p {
color: white;
margin: 20px;
}
#share,
#phone {
color: white;
margin: 20px;
}
#media only screen and (max-width: 750px) {
#share,
#phone {
display: none;
}
}
<head>
<meta charset="utf-8">
<title>Flo Music</title>
<link rel="stylesheet" type="text/css" href="listen.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div id="test">
<div id="body-wrapper">
<aside>
<div id="aside-wrap">
<div id="user-info">
<i class="far fa-user-circle" id="user"></i>
<h3>Emmanuel</h3>
</div>
<div id="box-1">
<p>Your Library</p>
<p>Recently Played</p>
<p>Songs</p>
<p>Playlist</p>
</div>
<div id="box-2">
<p>Your Library</p>
<p>Recently Played</p>
<p>Songs</p>
<p>Playlist</p>
</div>
<p>HOME</p>
</div>
</aside>
<section id="section1">
<div id="section1-wrapper">
<h1>New Releases</h1>
<div id="image-row-1">
<div class="image-box"><img src="album1.jpg"></div>
<div class="image-box"><img src="album2.jpg"></div>
<div class="image-box"><img src="album3.jpg"></div>
<div class="image-box"><img src="album4.jpg"></div>
</div>
<div id="image-row-2">
<div class="image-box"><img src="album5.jpg"></div>
<div class="image-box"><img src="album6.jpg"></div>
<div class="image-box"><img src="album7.jpg"></div>
<div class="image-box"><img src="album8.png"></div>
</div>
<div id="image-row-3">
<div class="image-box"><img src="album9.jpg"></div>
<div class="image-box"><img src="album10.jpg"></div>
<div class="image-box"><img src="album11.jpg"></div>
<div class="image-box"><img src="album12.jpg"></div>
</div>
<div id="image-row-4">
<div class="image-box"><img src="album13.jpg"></div>
<div class="image-box"><img src="album14.jpg"></div>
<div class="image-box"><img src="album15.jpg"></div>
<div class="image-box"><img src="album16.jpg"></div>
</div>
</div>
</section>
</div>
<div id="player">
<div id="player-wrapper">
<div id="controls">
<i class="fas fa-backward button-controls"></i>
<i class="fas fa-play button-controls"></i>
<i class="fas fa-forward button-controls"></i>
</div>
<div id="timeline">
<p>0:00</p>
<div id="player-bar">
<div id="player-filler"></div>
</div>
<p>0:00</p>
</div>
<div id="icon-right">
<i class="fas fa-share-square" id="share"></i>
<i class="fas fa-mobile" id="phone"></i>
</div>
Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).
Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.
See this post for details: Working with the CSS height property and percentage values
Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.
See this post for details: Can't scroll to top of flex item that is overflowing container
Make these adjustments to your code:
#body-wrapper {
display: flex;
/* height: 100%; */
height: calc(100vh - 80px); /* subtract footer height */
}
#section1 {
background-color: #191919;
display: flex;
align-items: center;
/* justify-content: center; */ /* remove to avoid scrolling problems */
flex-direction: column;
width: 100%;
overflow: auto;
}
#section1-wrapper {
width: 80%;
display: flex;
font-family: 'Roboto';
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
flex-shrink: 0; /* add to disable flex default shrinking feature */
}
jsFiddle demo
You should change your overflow property in the #section1
#section1-wrapper {
overflow: scroll;
}