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.
Related
There seems to be a problem in this next piece of code. Testing on Chrome, there is a difference of just .5 px between height and width, but when switching to device mode, the difference gets bigger (almost 10px). I do have a <meta name="viewport" content="width=device-width, initial-scale=1.0"> set.
What I need: perfect squares and perfect circles. Flexbox is used and I don't want this :after fix used to create perfect squares. What am I doing wrong?
body {
max-inline-size: 1440px;
margin: 0 auto;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
block-size: calc(50vw - 52px);
}
.abc {
font-size:90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex-grow: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
.lc {
block-size: calc(33vw - 46px);
}
}
#media screen and (min-width: 1440px) {
.lc {
block-size: calc((1440px / 3) - 46px);
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
Not sure why you don't want to use the padding trick but it's the way to go. Your calculation won't be accurate using vw unit because you need to account for the scrollbar width
body {
max-inline-size: 1440px;
margin: 0 auto;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
}
/* this will do the trick */
.lc .abc::before {
content:"";
padding-top:100%;
}
/**/
.abc {
font-size: min(90px,18vw);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex-grow: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
If you insist on using vw you need to adjust the code like below. Notice how you will have perfect square but I had to hide the scrollbar to get the result:
body {
max-inline-size: 1440px;
margin: 0 auto;
overflow:hidden;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
block-size: calc(50vw - 2px); /* remove only margin */
box-sizing:border-box; /* you don't have to care about padding and border*/
}
.abc {
font-size: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
.lc {
block-size: calc(calc(100vw/3) - 2px);
}
}
#media screen and (min-width: 1440px) {
.lc {
block-size: calc((1440px / 3) - 2px);
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
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 trying to build a 3 by 3 flexbox grid of button links that are responsive. The grid looks great on desktop and tablet, however, in the mobile version the items are left aligned and are unable to be horizontally centered. My goal is to get one column for the mobile with all the content centered. I switched to flex: 100%; for the mobile version and tried using justify-content: center, but it doesn't work and I'm not sure why.
#love_button,
#additude_button,
#isnpr_button,
#functional_medicine_button,
#immh_button {
width: 178px;
height: 111px;
display: block;
background-repeat: no-repeat;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border: 4px solid orange;
}
.flex-item {
width: 178px;
height: 111px;
flex: 33.3% 33.3% 33.3%;
margin-bottom: 65px;
background: royalblue;
}
Mobile Media Query #media only screen and (max-device-width: 640px) {
/* Fixes bottom gap between resource link and footer mobile */
.push {
margin-bottom: 0;
}
.flex-container {
justify-content: center;
}
.flex-item {
flex: 100%;
}
#hide {
display: none;
}
}
<main>
<section id="resources">
<h1 class="resources_header">RESOURCES</h1>
<div class="flex-container">
</div>
<div class="flex-container push">
</div>
</section>
</main>
Instead try changing display:block and margin:10px auto in the media query.
Please check my snippet, and let me know if you have any questions.
#love_button,
#additude_button,
#isnpr_button,
#functional_medicine_button,
#immh_button {
width: 178px;
height: 111px;
display: block;
background-repeat: no-repeat;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-evenly;
}
.flex-item {
width: 178px;
height: 111px;
flex: 33.3% 33.3% 33.3%;
margin-bottom: 65px;
border: 1px solid red;
background: green;
}
#media only screen and (max-width: 640px) {
/* Fixes bottom gap between resource link and footer mobile */
.push {
margin-bottom: 0;
}
.flex-container {
display: block;
margin: auto;
}
.flex-item {
margin: 10px auto;
}
#hide {
display: none;
}
}
<main>
<section id="resources">
<h1 class="resources_header">RESOURCES</h1>
<div class="flex-container">
</div>
<div class="flex-container push">
</div>
</section>
</main>
Use align-items: center or align-content: space-evenly or both.
Without align-items or align-content
.flex-container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
}
.flex-children {
width: 40px;
height: 40px;
background-color: red;
}
<div class="flex-container">
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
</div>
With align-items or align-content
.flex-container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.flex-children {
width: 40px;
height: 40px;
background-color: red;
}
<div class="flex-container">
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
</div>
CSS-tricks: align-items
CSS-tricks: align-content
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>
I'm trying to build media query, which will be working like on the sketch. Any suggestion?
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
display: flex;
flex-direction: row;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.name {order: 1}
.action {order: 2}
.options {order: 3}
.container {
flex-direction: column;
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>
I have already started, but I'm not really satisfied :). I need something more stable, as I will want to use it here later.
https://codepen.io/danzawadzki/pen/mwPYMz
At this moment I'm changing order and flex-direction in media query, but it's not good enough. Box number 1 will contain name of the segment, so it should have fixed width. There will be multiple items like that in one column, so I would prefer to keep it looks clean with same proportions.
Use this may be it will work for you
#media (max-width: 350px){
.options {order: 3; flex:0 0 100%;}
.container {
flex-wrap: wrap;
}
}
If you change your #media and remove flex-direction: column and add flex-basis: 100% to the option, it will flow as your image shows
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
Note, I also removed the .name and .action rules, as they are not necessary
Fiddle demo
Stack snippet
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
display: flex;
flex-direction: row;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>
Updated
By setting .options { flex-grow: 1; } and .option { flex: 1 1 80px; }, you can have the options/option elements to fill the remaining space on wider screens
Fiddle demo 2
Stack snippet 2
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
flex-grow: 1;
display: flex;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex: 1 1 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>