I'm having a problem with getting a background-image to show within a flexbox. Whenever I enter it manually in the HTML it shows the image, however... When I try to load it as background-image: url("imagepath") it won't load.
This is the CSS:
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #f3f3f3;
color: white;
}
/*Style voor h2 tekst*/
h2 {}
/* Style the header */
.header {
background-color: #999999;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.newsboxtop{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 3px;
background: url("images/Lightgraydient75x30.png");
text-align: center;
height: 30px;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #999999;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
#media (max-width: 1280px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
#media (max-width: 1500px){
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}
And this is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox">
<div class="newsboxtop">
<!--////////////////////////////////////////////////////-->
<!-- images/Lightgraydient75x30.png This is for testing -->
<!--////////////////////////////////////////////////////-->
asd
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
dfg
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
ghj
</div>
</div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Please let me know if I'm overlooking something, or if I'm using CSS the wrong way, thank you so much.
Have you tried
background: url("../images/Lightgraydient75x30.png");
background-image is working fine, you have to set div height as per your image. check updated snippet below...
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #f3f3f3;
color: white;
}
/*Style voor h2 tekst*/
h2 {}
/* Style the header */
.header {
background-color: #999999;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.newsboxtop{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 3px;
background: url(https://dummyimage.com/500x800/ff0000/000000.png&text=);
text-align: center;
height: 30px;
background-size: cover;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #999999;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
#media (max-width: 1280px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
#media (max-width: 1500px){
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox">
<div class="newsboxtop">
<!--////////////////////////////////////////////////////-->
<!-- images/Lightgraydient75x30.png This is for testing -->
<!--////////////////////////////////////////////////////-->
asd
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
dfg
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
ghj
</div>
</div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
Related
I'm having trouble getting max-width to work in IE. Is there a way to get max-width to work on IE?
This is what it looks like on other browsers:
enter image description here
This is what it looks like on IE:
enter image description here
here's HTML code
<div class="grid menu-content" id="menu1-content">
<article>
<div class="photo" style="background-image: url(img/test.jpg);">
</div>
<div class="text">
<div class="company-name">Name</div>
<div class="company-description">Basdfasdfasdf
</div>
</div>
<div class="founders">
<div class="founder">
<div class="picture"><img src="img/test.jpg" alt="asdf"></div>
<div class="name">FIRSTNAME LASTNAME</div>
</div>
<div class="founder">
<div class="picture"><img src="img/test.jpg" alt="sdf"></div>
<div class="name">FIRSTNAME LASTNAME</div>
</div>
</div>
</article>
<article>
<div class="photo" style="background-image: url(img/test.jpg);"></div>
<div class="text">
<div class="company-name">name</div>
<div class="company-description">asdfasdf
</div>
</div>
<div class="founders">
<div class="founder">
<div class="picture"><img src="img/breadfinance-founder.jpg" alt="Bread Finance Founder JOSH ABRAMOWITZ
"></div>
<div class="name">BEN JIN
</div>
</div>
</div>
</article>
<article>
<div class="photo" style="background-image: url(img/test.jpg);"></div>
<div class="text">
<div class="company-name">asdfasdf</div>
<div class="company-description">asdfasdfasdf
</div>
</div>
<div class="founders">
<div class="founder">
<div class="picture"><img src="img/test.jpg" alt="asdf"></div>
<div class="name">KATIE KIM</div>
</div>
</div>
</article>
<article>
<div class="photo" style="background-image: url(img/test.jpg);"></div>
<div class="text">
<div class="company-name">asdfasdf</div>
<div class="company-description">asdfasdf
</div>
</div>
<div class="founders">
<div class="founder">
<div class="picture"><img src="img/test.jpg" alt="asdfasdf"></div>
<div class="name">DEBBIE KIM</div>
</div>
</div>
</article>
</div>
here's CSS
.name {
font-size: 12px;
letter-spacing: 2.2px;
margin-left: 17px;
}
.founder img {
width: 22px;
}
.founder {
margin-bottom: -5px;
}
article .picture {
max-width: 22px;
}
.
.company-name {
margin-top: 20px;
margin-bottom: 1px;
font-size: 22.5px;
}
.company-description {
font-size: 21px;
line-height: 1.8;
letter-spacing: 0.5px;
margin-bottom: 6px ;
}
.founders {
position: absolute;
}
.founder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin, padding: 0px;
}
.name {
letter-spacing: 2.2px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 1.6;
}
.picture {
-webkit-box-flex: 0;
-ms-flex: 0 0 22px;
flex: 0 0 22px;
margin: 0;
}
.founder img {
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.founders {
top: 99%;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
.grid article {
-ms-flex: 0 0 250px;
margin-right: 20px;
margin-bottom: 150px;
-ms-flex-pack: start;
}
.grid article {
-ms-flex: 0 0 250px;
margin-right: 20px;
margin-bottom: 150px;
-ms-flex-pack: start;
}
}
some more css that's probably not relevant
.grid {
display: -ms-flexbox;
-ms-flex-wrap: wrap;
display: grid;
-webkit-box-pack: start;
justify-content: start;
justify-content: space-between;
row-gap: 100px;
}
.grid article {
-ms-flex: 0 0 250px;
-ms-flex-pack: start;
}
.grid .photo {
width: 100%;
background-size: contain;
background-position: center;
}
.grid .photo:after {
content: "";
display: block;
padding-bottom: 100%;
}
.grid a {
display: block;
text-decoration: none;
color: inherit;
}
.grid article {
position: relative;
}
.grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-row-gap: 100px;
grid-column-gap: 50px;
}
It looks like you have created this new thread for the same issue that you had asked for before.
I have tested the sample code and found that -ms-flex: 1; and flex: 1; in the .name class is causing this issue.
IE 11 has partial support for the Flex due to some known issues. This can be a possible reason for this issue.
The issue can be fixed by commenting or removing the flex from the .name class.
.name class:
.name {
letter-spacing: 2.2px;
-webkit-box-flex: 1;
/*-ms-flex: 1;
flex: 1;*/
line-height: 1.6;
}
Output:
With using flexbox I am trying to create the right lay-out on screens with min-width of 1024 (using #media query). The assignment says we should do it with the flex (shorthand) property but I can't seem to figure out how. The flex-items should however grow by expanding the viewport.
Next to that when I set the flex-flow to row-wrap in the media query it only shows two flex-items per row instead of all three. I tried setting a width on the container element but that didn't help. For the assignment I am not allowed to use Grid or Table. And the since the letters define a acronym they should be in two seperate div's.
Hopefully I have been able to give an accurate description of the desired result (see pictures below for the desired result) Any help would be much appreciated!
Code: Codepen
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nederlandversteend.css" type="text/css">
<title>Nederland versteend</title>
</head>
<body>
<!-- Image Gallery -->
<section>
<h2 id="natuurfoto's">Foot's van onze natuur</h2>
<div>
<img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
<img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
<img src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
<img src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
</div>
</section>
<!-- Horizontal line -->
<hr>
<!--Textblocks-->
<section class="textblock-container">
<!-- First acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
<!-- 2nd acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</section>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');
/* General styles */
html {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0 1.5rem;
}
#media only screen and (min-width:1440px) {
body {
inline-size: 1200px;
margin: 0 auto;
}
}/* Gallery */
.image-container {
display: flex;
flex-flow: column wrap;
align-content: center;
padding-block-end: 10px;
}
img {
inline-size: 100%;
}
img:nth-child(n+2):nth-child(-n+3) {
opacity: 0.5;
}
#media only screen and (min-width:768px) {
img {
inline-size: 49.7%;
}
}
#media only screen and (min-width:1024px) {
img {
inline-size: 24.69%;
}
}
/* Horizontal line */
hr {
border-image: linear-gradient(to right, black, white, black) 1;
}
/*Textblocks*/
.textblock-container {
display: flex;
justify-content: space-between;
}
.textblock-wrapper {
display: flex;
flex-flow: column wrap;
}
.textblock-square {
display: flex;
flex: auto;
block-size: 30vw;
inline-size: 30vw;
border:1px solid black;
padding:10px;
border-radius: 15%;
background-color: blue;
margin-block-end: 5px;
}
.textblock-circle{
block-size: 30vw;
inline-size: 30vw;
border-radius: 75%;
background-color: lightgrey;
text-align: center;
line-height: 30vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-square {
flex: auto;
}
You could change the flex-direction of .textblock-container to 'column' in #media query. I adjusted the inline-size of .textblock-square as well. See below:
#import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');
/* General styles */
html {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0 1.5rem;
}
#media only screen and (min-width:1440px) {
body {
inline-size: 1200px;
margin: 0 auto;
}
}/* Gallery */
.image-container {
display: flex;
flex-flow: column wrap;
align-content: center;
padding-block-end: 10px;
}
img {
inline-size: 100%;
}
img:nth-child(n+2):nth-child(-n+3) {
opacity: 0.5;
}
#media only screen and (min-width:768px) {
img {
inline-size: 49.7%;
}
}
#media only screen and (min-width:1024px) {
img {
inline-size: 24.69%;
}
}
/* Horizontal line */
hr {
border-image: linear-gradient(to right, black, white, black) 1;
}
/*Textblocks*/
.textblock-container {
display: flex;
justify-content: space-between;
}
.textblock-wrapper {
display: flex;
flex-flow: column wrap;
}
.textblock-square {
display: flex;
flex: auto;
block-size: 30vw;
inline-size: 30vw;
border:1px solid black;
padding:10px;
border-radius: 15%;
background-color: blue;
margin-block-end: 5px;
}
.textblock-circle{
block-size: 30vw;
inline-size: 30vw;
border-radius: 75%;
background-color: lightgrey;
text-align: center;
line-height: 30vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-container{
flex-direction: column;
}
.textblock-square {
flex: auto;
inline-size: 10vw;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nederlandversteend.css" type="text/css">
<title>Nederland versteend</title>
</head>
<body>
<!-- Image Gallery -->
<section>
<h2 id="natuurfoto's">Foot's van onze natuur</h2>
<div>
<img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
<img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
<img src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
<img src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
</div>
</section>
<!-- Horizontal line -->
<hr>
<!--Textblocks-->
<section class="textblock-container">
<!-- First acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
<!-- 2nd acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</section>
</body>
</html>
I made you such a layout... What has changed - a heading appeared above the blocks. The blocks themselves are adaptive to you, since a flex wrap was added, and all blocks are in the same parent container, which will allow for better mobile adaptation. The content of the blue blocks has been adjusted. Adjusted to fit the image. You can set the necessary indents between the blocks at your discretion.
#import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');
/* General styles */
html {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0 1.5rem;
}
#media only screen and (min-width:1440px) {
body {
inline-size: 1200px;
margin: 0 auto;
}
}/* Gallery */
.image-container {
display: flex;
flex-flow: column wrap;
align-content: center;
padding-block-end: 10px;
}
.images {
display: flex;
flex-wrap: wrap;
}
img {
inline-size: 100%;
}
img:nth-child(n+2):nth-child(-n+3) {
opacity: 0.5;
}
#media only screen and (min-width:768px) {
img {
inline-size: 49.7%;
}
}
#media only screen and (min-width:1024px) {
img {
inline-size: 24.69%;
}
}
/* Horizontal line */
hr {
border-image: linear-gradient(to right, black, white, black) 1;
}
/*Textblocks*/
.textblock-container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.textblock-wrapper {
display: flex;
flex-wrap: wrap;
}
.textblock-square {
display: flex;
justify-content: center;
align-items: center;
flex: auto;
block-size: 30vw;
inline-size: 30vw;
border:1px solid black;
padding:10px;
border-radius: 15%;
background-color: blue;
margin-block-end: 5px;
}
.textblock-circle{
block-size: 30vw;
inline-size: 30vw;
border-radius: 75%;
background-color: lightgrey;
text-align: center;
line-height: 30vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-square {
flex: auto;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nederlandversteend.css" type="text/css">
<title>Nederland versteend</title>
</head>
<body>
<!-- Image Gallery -->
<section>
<h2 id="natuurfoto's">Foot's van onze natuur</h2>
<div class="images">
<img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
<img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
<img src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
<img src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
</div>
</section>
<!-- Horizontal line -->
<hr>
<!--Textblocks-->
<section class="textblock-container">
<h2 id="blocks">This is wrap blocks</h2>
<!-- First acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</section>
Thanks for jumping in. Your answers were helpful. I have managed to create the result I wanted by altering the CSS as below.
For full page see Codepen
/*Textblocks*/
.textblock-container {
display: flex;
flex: 1 0 50%;
}
.textblock-wrapper {
display: flex;
flex: 1 0 50%;
flex-flow: column wrap;
}
.textblock-square {
display: flex;
border: 2px solid #000;
padding:10px;
border-radius: 15%;
background-color: #0000ff;
margin-inline-end: 2px;
margin-block-end: 2px;
}
.textblock-circle{
flex: 75%;
border-radius: 75%;
background-color: #D3D3D3;
border: 1px solid #000;
text-align: center;
line-height: 28vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-container{
flex-direction: column;
}
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-square {
flex: auto;
}
}
HTML
<!--Textblocks-->
<section>
<h2>Letterblokjes</h2>
<!-- First acronym -->
<div class="textblock-container">
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
<!-- Second acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</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;
}
I'm having a problem with some CSS, I have 3 news columns that I want to stack when the screen gets less wide then 1024px. However, with the code, I've got right now they just disappear. Strangely I've got 2 of these rows that need to stack, one called .row which is working and one called .newsrow which is not working.
CSS:
/*Neccasary for alignment for some reason, have to solve this issue later*/
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #000;
color: white;
}
/*Style voor h2 tekst*/
h2 {
}
/* Style the header */
.header {
background-color: #222222;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 10px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #222222;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
#media (max-width: 1024px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
display: block;
}
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox"></div>
<div class="newsbox"></div>
<div class="newsbox"></div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
The issue:
When I make the screen smaller everything within .row stacks on top of each other instead of side by side. However, everything in .newsrow just disappears once it reaches the width of 1023px.
Please help me out with this.
Your problem is that you are setting the height of the columns, look at this example
/*Neccasary for alignment for some reason, have to solve this issue later*/
* {
box-sizing: border-box;
}
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 10px;
min-width: 200px;
text-align: center;
background-color: yellow;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
#media (max-width: 1024px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}
<div class="row">
<div class="column" style="background-color:red; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:blue; flex-grow: 4;">
<div class="middlemenu" style="background-color:orange">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox">lIn velit voluptate </div>
<div class="newsbox">asa<div>
<div class="newsbox">asdas</div>
</div>
</div>
<div class="column" style="background-color:green; padding: 10px;">112389127389721 WHEEEH</div>
</div>
Hope it helps
Remove the height property on .column
fiddle
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #000;
color: white;
}
/*Style voor h2 tekst*/
h2 {}
/* Style the header */
.header {
background-color: #222222;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
/* remove this */
/* height: 300px; */
text-align: center;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 10px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #222222;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
#media (max-width: 1024px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox"></div>
<div class="newsbox"></div>
<div class="newsbox"></div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
You should remove the .column in your stylesheet.
If you want to make this site more smoth you can add more media querys. I personally use them like this:
/*Responsive Design*/
#media only screen and (min-width: 300px){
.cardinhalt{
width: calc(100% - 10px) !Important;
}
}
/*Responsive Design*/
#media only screen and (min-width: 600px){
.cardinhalt{
width: calc(50% - 10px) !Important;
}
}
/*Responsive Design*/
#media only screen and (min-width: 900px){
.cardinhalt{
width: calc(33.33% - 10px) !Important;
}
}
/*Responsive Design*/
#media only screen and (min-width: 1200px){
.cardinhalt{
width: calc(25% - 10px) !Important;
}
}
/*Responsive Design*/
#media only screen and (min-width: 1200px){
.cardContainer{
width: 1200px;
position: relative;
margin: auto;
}
try this:
#media (max-width: 1024px) {
.newsrow {
display:block;
}
.newsbox{
display:flex;
}
.column {
height:auto;
}
}
https://jsfiddle.net/n3e5qksh/1/
The .column height did fix the problem after removing it. The boxes worked as soon as I entered some information into them.
I want to use flexbox to make a column that can scroll as its text content gets longer.
I drew a picture in keynote to make a better explanation.
when texts are small
when texts get big
Here is my current code, just every elements in my code is in flexboxes.
I edited my script to include .app .sidebar
.app {
display: flex;
height: 100vh;
flex-direction: row;
}
.sidebar {
display:flex;
flex: 1;
}
.cv {
display: flex;
flex:5;
flex-direction: column;
margin:20px;
border: 1px solid lightgrey;
border-radius: 10px;
background-color: white;
overflow: scroll;
}
.header {
display: flex;
flex: 0 0 150px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.section {
display: flex;
flex-direction: column;
border: 1px solid lightgrey;
margin: 10px;
border-radius: 10px;
}
.sectionHeader{
display: flex;
align-items: center;
font-size: 18px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 5px;
flex: 0 0 30px;
background-color: gray;
color:white;
font-weight: 700;
}
.sectionBody{
display: flex;
flex: 1;
padding: 20px;
}
<div class="app">
<div class="sidebar"></div>
<div class="cv">
<div class="header">Header</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
</div>
</div>
You need to do 2 things:
Give the cv a min-height: 0; (fix for i.a. Firefox)
Add flex-shrink: 0 to the .section so it won't collapse when not fit
Stack snippet
body {
margin: 0;
}
.app {
display: flex;
height: 100vh;
}
.sidebar {
display: flex;
flex: 1;
background: red;
}
.cv {
display: flex;
flex: 5;
flex-direction: column;
margin: 20px;
border: 1px solid lightgrey;
border-radius: 10px;
background-color: white;
overflow: scroll;
min-height: 0; /* added */
}
.header {
display: flex;
flex: 0 0 150px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.section {
display: flex;
flex-direction: column;
border: 1px solid lightgrey;
margin: 10px;
border-radius: 10px;
flex-shrink: 0; /* added */
}
.sectionHeader {
display: flex;
align-items: center;
font-size: 18px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 5px;
flex: 0 0 30px;
background-color: gray;
color: white;
font-weight: 700;
}
.sectionBody {
display: flex;
flex: 1;
padding: 20px;
}
<div class="app">
<div class="sidebar">sidebar</div>
<div class="cv">
<div class="header">Header</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
</div>
</div>