My background image won't show up in the div I want to display in. However, it shows up if I put it in other elements. For example, I put it in the body element and it showed up just fine, but it won't display in the div I want it to. Can you check my code and see what I'm doing wrong. I double checked my file path and also the file type, and it's all fine. So, I'm not being able to figure out what I'm doing wrong.
HTML:
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
</body>
CSS:
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('logo.jpg');
}
This is because you are trying set background image in an empty element, which has 0 height.
Set specific width/height of the element.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj');
height: 10em;
background-size: contain;
background-repeat: no-repeat;
}
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
Your div has no content. Either give some content or if that does not agree with your current design, give explicit height and width.
.image{
width: 200px;
height: 200px;
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
.image2{
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
<div class="image"></div>
<div class="image2"></div>
You need to add width, height, and background-size properties to the .image.
body {
margin: 0;
font-size: 1.125rem;
font-weight: 400;
min-height: 100vh;
}
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px) {
.container-flex {
flex-direction: row;
}
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin-left: 2em;
}
nav a {
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1 {
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px) {
nav ul {
flex-direction: column;
}
nav li {
margin: .5em 0;
}
}
.container:nth-child(2){
height: 250px; /* set the height here */
}
main{
width: 100%;
height: 100%;
}
.image {
height: 30%;
width: 30%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Disk_pack1.svg/1200px-Disk_pack1.svg.png');
background-size: cover;
}
<body>
<header>
<div class="container container-flex">
<div class="title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class="container container-flex">
<main role="main">
<div class="image">
</div>
</main>
</div>
</body>
Edit: You need to set the height on the second .container class. Because of no height, the relative units didn't work. Also, you need to set the height and width on parent (main) element of .image.
in your code if you setting an image in div tag it is should have a height and weight. This is another way to add images in your application with responsive.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image img{
width: 100%;
height: auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title Goes Here</title>
<meta name="description" content="Description Goes Here">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" alt="Smiley face">
</div>
</main>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
As mentioned in answers by other users, your div element is empty and will sit on your page with effectively height: 0px; and width: 0px; properties.
To combat this, you should add a width property to your .image div in your stylesheets.
You can either then control the height of the image div with the height property, or alternatively you could use padding-bottom to give a more responsive twist to your styling, since padding-bottom: x% is a percentage of the element's width.
For example, adding:
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-bottom: 100%;
width: 100%;
}
would create a square image that will stay responsively square as the page width, and therefore the width of the div.iamge element shrinks. The padding value can be played around with to get the right height for the element that you desire.
UPDATE
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
background-color: red;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.image-wrapper {
width: 75%;
}
.image {
background-color: green;
height: 0;
padding-bottom: 100%;
}
.container {
color: white;
padding-bottom: 16px;
}
.center-image {
margin: 0 auto;
}
<body>
<header>
</header>
<div class="container">
container
<main role="main">
<div class="image-wrapper center-image">
<div class="image">
<span>image</span>
</div>
</div>
</main>
</div>
</body>
Related
My header should be fixed on the page so i couldn't use float:right;. I'm %150 newbie around here. Logo should be on right side of the navbar and also responsive. I tried margin, float and other flex properties. I'm just going to be mad. Where is the mistake.
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
The issue is mainly caused because you nesting so many flexboxes within each other. As such the elements will not span the entire available width automatically.
Give the nav tag a width of 100% to fill out the entire containers width: #nav-bar { width: 100% }
to align the logo to the right within a flexbox use margin-left: auto: .header-logo { margin-left: auto; }
Also you could improve your code by removing the ID from the nav element and target the nav element directly. As semantically you should only have one nav element it would be unecessary to asign an id to it. Same rule also counts for the header element.
Then you could remove display: flex; from the header which has only one child element in the first place and as such is useless. IMHO it would be smarter though to close the nav with the ul as the logog is semantically not part of the navbar.
Last but not least you could remove flex-direction: row as it is the default value anyways.
#nav-bar {
width: 100%;
}
.header-logo {
margin-left: auto;
}
/* original CSS */
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
I also created a Codepen for you where I corrected the code to be semantically correct and to shroten it to the necessary lines: Codepen
I'm trying to place 3 images on the same row using flexbox. I also want to change the size of the first image as it is too big. However, my CSS rules are not being applied properly. I have the images each inside their own div with a class of flex-item-3 to indicate that they are flex items inside my flex container. However, I can't seem to override the default CSS rules.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lato', 'sans-serif', 'arial';
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.wrapper {
max-width: 100%;
margin: 0 auto;
}
section {
padding: 80px 0;
}
h2 {
margin: 0;
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("img/truck.jpg");
background-size: cover;
background-position: center;
}
.flex-item {
padding-top: 15px;
height: 100vh;
}
.item1 {
padding-top: 0;
padding-left: 30px;
}
.logo {
height: 90px;
}
.main-nav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav a {
color: white;
padding: 1rem;
text-decoration: none;
}
.main-nav a:hover {
color: orange;
}
.hero {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
}
.hero a {
text-decoration: none;
color: white;
display: block;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
.btn {
background-color: orange;
}
.flex2 {
display: flex;
justify-content: center;
align-items: center;
}
.flex-item-2 {
color: #312c2c;
width: 100%;
text-align: center;
}
.second-flex-item p {
margin-top: 20px;
margin-bottom: 40px;
font-size: 19px;
color: #312c2c;
}
.second-flex-item h2 {
font-weight: 900;
font-size: 25px;
}
.flex-3 {
display: flex;
justify-content: center;
max-width: 100%;
}
.flex-3-items {
display: flex;
width: 100%;
height: auto;
}
<body class="wrapper">
<header class="flex">
<div class="flex-item item1">
<img src="Resources/img/moBurgerzLogo.png" class="logo">
</div>
<nav class="flex-item main-nav">
<ul>
<li>Our Story</li>
<li>Locations</li>
<li>Menu</li>
<li>Order now</li>
</ul>
</nav>
<div class="hero">
<h2>Best Burgers <br> In DA City(D.C)</h2>
<a href="#" class="btn" btn-full>Order now!</a>
<a href="#" class="btn" btn-ghost>View Menu!</a>
</div>
</header>
<section class="flex-2">
<div class="flex-item-2 second-flex-item">
<h2>Established in 2017 in D.M.V</h2>
<p class="story"> moBurgerz was founded in 2017 by owner Mahamed Ibrahim.<br> Since then we have been serving the best hand crafted burgers in the D.M.V.<br>All our meat is halal and all of our ingridients are organic.</p>
<img src="Resources/img/white_truck.jpeg" class="truck-img">
</div>
</section>
<section class="flex-3">
<div class="flex-3-item meal-photos photo-1">
<img src="Resources/img/cheeseSteak.jpg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/goodMoanin.jpeg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/moGul.jpeg">
</div>
</section>
</body>
.flex-3-item img { max-width:100%; } should do the trick.
Also, look at this: Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
Try this
.logo {
width: 100%;
height: auto;
}
I currently have a problem with my header. At the moment I have a skewed gradient as my header background image. Whenever I try to place a navbar above this header I can't see it no matter which design I use. Can someone please tell me how to make a navbar go above this header?
Thanks
Image: Site with working images
Code:
#import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body{
width:100%;
margin:auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh;
}
img:hover {
filter: brightness(80%);
}
.responsive {
}
header {
position: relative;
height: 80vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -45vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
</head>
<body>
<div class="fullwidth">
</div>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
</div>
<main class="site-wrapper">
<div class="container">
<div class="responsive"><img src="img4.jpg"></div>
<div class="responsive"><img src="img1.jpg"></div>
<div class="responsive"><img src="img2.jpg"></div>
<div class="responsive"><img src="img3.jpg"></div>
<div class="responsive"><img src="img6.jpg"></div>
<div class="responsive"><img src="img5.jpg"></div>
<div class="responsive"><img src="img7.jpg"></div>
<div class="responsive"><img src="img9.jpg"></div>
</div>
</main>
</body>
</html>
You need to have a z-index property on your <nav> with a colored background to make it visible, and to do so, the <nav> has to have a different display value (i.e. Relative, Absolute, ... etc.) rather than the default static value.
Check this out:
#import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh;
}
img:hover {
filter: brightness(80%);
}
.responsive {}
header {
position: relative;
height: 80vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -45vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: #fff;
position: relative;
z-index: 1;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style: none
}
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
</head>
<body>
<div class="fullwidth">
</div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
<main class="site-wrapper">
<div class="container">
<div class="responsive"><img src="img4.jpg"></div>
<div class="responsive"><img src="img1.jpg"></div>
<div class="responsive"><img src="img2.jpg"></div>
<div class="responsive"><img src="img3.jpg"></div>
<div class="responsive"><img src="img6.jpg"></div>
<div class="responsive"><img src="img5.jpg"></div>
<div class="responsive"><img src="img7.jpg"></div>
<div class="responsive"><img src="img9.jpg"></div>
</div>
</main>
</body>
</html>
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;
}
Could not yet find this exact issue that I am having addressed, so it here goes:
I am trying to create a nav bar with a heading on the left-hand side, and some nav items on the right. I also want the nav to be centered on the page, with a width of 960px. I am trying to accomplish 2 additional things:
1.) The nav bar should be fixed to the top so that it does not disappear when you scroll.
2.) The spacing between the heading and the nav items should be the first to disappear when you minimize the screen. Currently, the items do not flex at all.
I am able to get one of these two things accomplished at a time, but not both at the same time. Any help would be most welcome, thank you.
html {
font-family: helvetica;
font-size: 18px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.banner {
background-color: aqua;
opacity: .5;
border-radius: 10px;
position: fixed;
}
.header {
display: flex;
justify-content: space-between;
height: 4rem;
align-items: center;
width: 960px;
}
.container .banner .header h1 {
margin-left: 2.5rem;
}
.container .banner .header .nav ul {
display: flex;
width: 200px;
justify-content: space-between;
text-decoration: none;
margin-right: 2.5rem;
}
.container .banner .header .nav ul a {
color: black;
list-style-type: none;
text-decoration: none;
}
<div class="container">
<div class="banner">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</div>
You can use align-items: left for your heading and align-items: right instead of using margin
* {
padding: 0;
margin: 0;
}
html {
font-family: helvetica;
font-size: 18px;
}
.container .header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
height: 4rem;
align-items: center;
width: 100%;
position: fixed;
background: aqua;
opacity: .7;
border-radius: 10px;
}
.container .header .nav ul li {
display: inline-flex;
}
<!DOCTYPE html>
<html>
<head>
<title>My Puppy</title>
<link href="./resources/reset.css" type="text/css" rel="stylesheet">
<link href="./resources/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</body>
In your css file:
remove in .header
.header {
width: 960px;
}
add in .banner
.banner {
max-width: 960px;
width: 100%;
}