Code
https://jsfiddle.net/q9uo873f/
If I were to replicate grid using flex, how would it be written?
.container {
display: grid;
grid-template-columns: 194px 194px 194px;
justify-content: center;
}
Roughly;
Change these 2 rules as follows:
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
max-width: 582px;
margin: auto;
}
.playButton {
position: relative;
background-color: black;
/* width: 150px; /* delete */
margin: 2px;
height: 195px;
flex: 0 0 150px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
border-radius: 5px;
padding: 20px;
perspective: 700px;
}
1 Like
What if I didn’t want them to wrap?
https://jsfiddle.net/e2z4gs50/1/
This hides the buttons underneath the top 3.
flex-wrap: nowrap;
Then what do you expect will happen when the max-width is reached?
/*max-width: 582px;*/
If they can’t wrap and the element is only 582px then where are they going to go?
Remove the max-width and then you will see them assuming your screen is wide enough.
Then they are all in 1 row, they aren’t in 3 columns.
https://jsfiddle.net/34jphakd/
You are talking in riddles.
You just ask for them not to wrap and now you want them to wrap which is the code I gave you in the first place.
The code I gave you produces the same effect as you had with the grid.
With the grid code, when the width gets smaller, the buttons don’t wrap, and they stay in 3 columns.
https://jsfiddle.net/q9uo873f/
Can that be done with flex?
Just change the max-width:582px to width:582px. I’m sure you could have worked that out for yourself.
1 Like
Buttons still wrap, it’s not working here:
https://jsfiddle.net/3mzuwkyp/1/
How is that fixed?
.containerb {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 582px;
overflow: hidden;
margin: auto;
}
.playButton {
position: relative;
background-color: black;
/* width: 150px; /* delete */
margin: 2px;
height: 195px;
flex: 0 0 150px;
It was working for me when I tested so something must have changed again.
This works for me width min-width added so here’s a picture to prove it.
.containerb {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
width: 582px;
overflow: hidden;
min-width: 582px;
}
Can one of the width’s be removed and just use min-width: 582px;?
Not a good idea, I put it back.
.containerb {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
overflow: hidden;
min-width: 582px;
}
What do I do in this circumstance?
width: 100%; on the image is causing the buttons to expand from 3 to 4.
https://jsfiddle.net/dtwhyfcu/
width: 100%; is required on both .containera and .containerb
.containerb {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
width: 582px;
overflow: hidden;
min-width: 582px;
}
.containerb{
width: 100%;
opacity: 0;
animation: fade 5s ease 0s forwards;
background-image:
You do what I suggested a few times already and the background should be on the tcell element and not on .containerb. The tcell element is full width and will hold a background nicely.
If you want the background on containerb then you will need to nest another div inside and apply the rules that you originally had for containerb with the min-width and fixed width.
You really need to build the site to suit your needs and not bend the html to suit your needs. Each of your demos has a different requirement but you keep using the same code and end up with redundancy and a structure that doesn’t fully support the needs of the new design. This would be fine if you were just testing to get a final solution and then you could re-write once you have reached the design you wanted However it seems that is not your goal and when you keep moving the goalposts it gets much harder to score a goal 
2 Likes
If I add it to .tcell then the background gets added to the body where the play images are visible. That background should stay empty.
Yes but you only add it to the tcell element when you want it to be displayed. When the user clicks the button they you add a class in the js and display the background using that class. That’s why I keep telling you that you need to plan ahead.
You can probably do all of this by adding a class to the body and then use that class to decide what to show and where to show it. You are already doing similar with other classes but there’s no need for multiple classes in different places and multiple hides as the logic can most likely be obtained from one class (or two) on the body.
Solution: Use grid here.
https://jsfiddle.net/f8h64qsj/
Also, if I remove opacity: 0; from the code, I don’t see a difference in the code, that can be removed then, or no?
.containerb {
display: grid;
grid-template-columns: 194px 194px 194px;
justify-content: center;
width: 100%;
opacity: 0;
animation: fade 5s ease 0s forwards;
That is a Solution but I gave you others and there are possibly loads more. The difficulty is that you keep moving the goal posts. You say you don’t want flex and then you do and and then you say you don’t want grid and then you do.
Is this how its supposed to look because if so then I missed something along the way.
You can ‘probably’ remove opacity from the code but that means the elements default is opacity:1 so when the keyframe starts to run it has to set it to opacity:0 so there may be a danger of seeing a flash from on to off depending on how fast the element is rendered. It’s probably not an issue but if you want the element to start at opacity:0 then it seems sensible for that to be set by default.
1 Like
Is this what you mean by nesting?
https://jsfiddle.net/6xkr4etd/1/
How come the background isn’t showing?
.containerb .background {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
width: 582px;
overflow: hidden;
min-width: 582px;
}
.containerb .background{
width: 100%;
opacity: 0;
animation: fade 5s ease 0s forwards;
<div class="containerb hide">
<div class="background ">
Isn’t that the code that causes the white flash that I’m trying to resolve?
https://jsitor.com/-Z-q7whoS
or is what you are talking about something different?
.bodyfadea {
opacity: 0;
background: #353198;
animation: fadeBody 5s ease forwards;
}
.bodyfadeb body {
background-image:
}
@keyframes fadeBody {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
document.querySelector("html").classList.add("bodyfadea");
.bodyfadeb {
opacity: 0;
background: #353198;
animation: fadeBody 5s ease forwards;
}
.bodyfadeb body {
background-image:
}
@keyframes fadeBody {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
document.querySelector("html").classList.add("bodyfadeb");
I’m not sure how you got that.
Grid full screen looks like this for me.
