html: how to place div boxes next to and below each other?
Hello, I want to list services on my website.
For the PC view, these (6 in total) should be placed next to each other.
For tablet and mobile phone views, these should then be broken up so that there is enough space to read them and they do not blur into one another.
I've tried to have three boxes next to each other for the tablet, resulting in two columns. However, everything is now one below the other in every view, and you have to scroll to the side to read the entire text (but this shouldn't be the case).
Below is the part of my CSS file:
.perfomance {
padding: 15px;
margin: 15px;
}
.performance-container {
display: flex;
flex-direction: column;
}
/* Layout for tablet (partially side by side, partially below each other) */
@media (min-width: 25em) and (max-width: 45em) {
.performance-container {
display: flex;
flex-wrap: wrap;
}
.services {
flex: 1 1 calc(50% – 2em);
/* Two boxes next to each other */
}
}
/* Layout for PC (side by side) */
@media (min-width: 45em) and (max-width: 65em) {
.performance-container {
display: flex;
flex-wrap: wrap;
}
.services {
flex: 1 1 calc(33.33% – 2em);
/* Three boxes next to each other */
}
}
@media (min-width: 65em) {
.performance-container {
display: flex;
flex-wrap: wrap;
}
.services {
flex: 1 1 calc(33.33% – 2em);
/* Three boxes next to each other */
}
}
Is there anything wrong?
Can someone help me?
Thank you very much
(1 votes)
Loading...
For this you can display: flex; or display: grid; use.
For this, there are more than enough tutorials also YouTube, just look at both of you and say what’s more to you (means you can use flex or grid, with both you come to the target). What you use doesn’t matter.
Take a look at some videos that you will always need, especially flex
display: grid I’ve been running for the entire page and display:flex I’ve been running for the services. Is that perhaps a coincidence?
As I can just say, it’s colliding, yeah.
If you prefer a overflow value with into the individual text boxes, then the line jump is not in the Nirvana
What always helps me with this: codepen.io there you have no more than you absolutely need and immediately see your changes you can transfer. You have to try a lot in this state!
Use best flex boxes: https://kulturbanause.de/blog/import-in-das-flexbox-modell-von-css/
Look at the html grid model.
I got the grid layout at the beginning, I just didn’t get in here:
/*Layout for PC*/
@media (min-width: 65em) {
♪
grid-template-columns: repeat(4, 1fr);
grid-template-areas: “head head head head head” “nav nav nav nav nav” “main main main” “foot foot foot foot foot foot”;
}
}
/*Layout for tablet*/
@media (min-width: 45em) {
♪
grid-template-columns: repeat (2, 1fr);
grid-template-areas: “head head” “nav nav” “main main” “foot foot”
}
}
♪
/* Layout for mobile phone*/
display: grid;
grid-template-columns: repeat 1fr;
grid-template-areas: “head” “nav” “main” “foot”