How can I make these four stack up top one another?

I'll try to explain this to the best of my ability - So I've created four empty containers and I wanted to know if is there a way to make them change so they can stack on each other in one column when the browser screen goes very small?
No description
62 Replies
RMON
RMON10mo ago
Currently they look like this is there a way to change them so they all stack on top of each other? Here is a very crappy crappy demonstartion..
RMON
RMON10mo ago
No description
Zoë
Zoë10mo ago
You can use flexbox as a row with flex-wrap, this will automatically move things into the next row when they don't fit, or you can use grid (useful if you want everything to line up) with a grid-template-columns: repeat( auto-fill, minmax(16rem, 1fr)); (change the 16rem to suit) Neither of these solutions require you to specify a certain screen width, it will figure it out by itself. But if you do want to use break points, if you need things to change in tandem (you almost certainly don't need this) with other things you can manually change the number of columns in grid
clevermissfox
clevermissfox10mo ago
They stack by default so revert them to their initial state before you added flex or grid or table or float or translate ... whatever you did to make them look like this undo it.
Zoë
Zoë10mo ago
I wouldn't do that, I would do a grid and to not use magic numbers in media queries
RMON
RMON10mo ago
Ill send a codepen so you guys can see what it looks like in case I have other code messing interfering Ill send the code for the entire section (not much)
RMON
RMON10mo ago
Ok and one more thing, Since I actually don't like just copy and pasting the code and calling it mine would you mind explaining to me what you did and how it worked? I've been trying to figure this out since yesterday.
Zoë
Zoë10mo ago
1. I moved all projects into a single wrapper, you never need to break up elements into rows through elements, so just 1 wrapper 2. I replaced display: flex with display: grid and deleted flex related properties except gap as grid will still use that. 3. I decreased the size of --width to 18rem rather than the seemingly arbitrary 26.5rem. I decreased it significantly because of step 4 4. In the width of the wrapper I changed var(--width) * 2 into var(--width) * 3, this is so when the screen gets too small the columns initially squish, as with a multiplier of 2 as soon as things get too small it becomes a single column 5. I set grid-template-columns to repeat( auto-fill, minmax(var(--width), 1fr) );. What this does is that it will generate as many columns that are at least --width wide. So if you have 40rem of width, that can fit 2 columns with 4rem to spare, these 2 columns are then stretched to be half wide. If the screen width were to go to 30rem that can only fit in 1 column, this is also partly why I decreased the --width because max size is just under 2 times the width. 6. Removed width from the project box, once you start adding content it'll probably be a good idea to remove height (or change it to min-height) too so it can more easily adapt, or you can add a way to nicely handle overflow
RMON
RMON10mo ago
Gosh, Not only have you perfectly explained this but you've helped me with a problem I've been dealing with since yesterday. Thank you so much!
Zoë
Zoë10mo ago
No problem, any time
RMON
RMON10mo ago
Would you mind if I DM you for anything coding related in the future? You've helped me out a lot and to be fair you're one of the few people who's code actually workers amazingly.
Zoë
Zoë10mo ago
Post it in this server but do feel free to ping me if it's been an hour or so without a response. Other people here can help and I'm not always available
RMON
RMON10mo ago
Alright thank you so much!
RMON
RMON10mo ago
I have a question, Im having trouble moving the content inside the container further down how can I achieve this?
No description
Zoë
Zoë10mo ago
You could have flex column with justify-content: center on the container. Also have a align-items: center
RMON
RMON10mo ago
This is all the code I have exactly for the content inside
.Project-Boxes{
display: grid;
padding: 1.5rem;
align-content: center;
justify-items: center;
gap: 2rem;
}
.Project-Boxes{
display: grid;
padding: 1.5rem;
align-content: center;
justify-items: center;
gap: 2rem;
}
Justify-content doesn't do anything in this case?
Zoë
Zoë10mo ago
Ah right, this in the project box. I meant "container" generally, whatever the text and stuff was inside
RMON
RMON10mo ago
See it's centered nicely but I wanted to recreate this design
RMON
RMON10mo ago
No description
RMON
RMON10mo ago
I just don't have an IMG yet to display the projects Ill be creating soon
Zoë
Zoë10mo ago
Oh I see, remove justify-content and then in the text container set it to flex-grow: 1
RMON
RMON10mo ago
Ok let me try this
.Project-Boxes{
display: grid;
padding: 1.5rem;
justify-items: center;
gap: 2rem;
flex-grow: 1;
}
.Project-Boxes{
display: grid;
padding: 1.5rem;
justify-items: center;
gap: 2rem;
flex-grow: 1;
}
?
Zoë
Zoë10mo ago
No sorry, inside the project box you'll have something like
.project-boxes
img
div.text
h2 Yubter
p Yubter is...
button
.project-boxes
img
div.text
h2 Yubter
p Yubter is...
button
.project-boxes will be flex, column, align-items center .text will be flex-grow: 1 (this means it takes up a portion of space, if it's the only child element with flex-grow it will try and take up as much space as possible), it doesn't need any other properties
RMON
RMON10mo ago
<div class="projects-wrapper">
<div class="Project-Boxes">
<!--Project Img Code-->
<h1 class="Project-Title">Project #1</h1>
<p class="Project-Desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque.</p>
<button class="Project-Button">See Live</button>
</div>
<div class="Project-Boxes"></div>
<div class="Project-Boxes"></div>
<div class="Project-Boxes"></div>
</div>
</div>
<div class="projects-wrapper">
<div class="Project-Boxes">
<!--Project Img Code-->
<h1 class="Project-Title">Project #1</h1>
<p class="Project-Desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque.</p>
<button class="Project-Button">See Live</button>
</div>
<div class="Project-Boxes"></div>
<div class="Project-Boxes"></div>
<div class="Project-Boxes"></div>
</div>
</div>
Ignore the bad spacing it does that when I copy and paste it but thats the code for it
Zoë
Zoë10mo ago
You could also just set p:last-of-type to flex-grow:1 instead and leave the HTML as-is
RMON
RMON10mo ago
hmm what does p:last-of-type do? Ive never heard of it
Zoë
Zoë10mo ago
It selects the last p element. It differs from p:last-child in that :last-child doesn't care about type, so p:last-child won't select anything because button is last. This basically means that if you have multiple p elements only the last one will be made to grow and have the space under it
RMON
RMON10mo ago
Is that a css element? or no
Zoë
Zoë10mo ago
It's a CSS selector
.project-boxes p:last-of-type {
flex-grow: 1;
}
.project-boxes p:last-of-type {
flex-grow: 1;
}
(also I'd remove capitalisation from your class names)
RMON
RMON10mo ago
How come?
Zoë
Zoë10mo ago
It's non-standard to use capitalisation
RMON
RMON10mo ago
Can it screw up? Or is it just not normal to do that
Zoë
Zoë10mo ago
It can cause problems if you're inconsistent with it, like you have projects-wrapper and Project-Boxes and you might try and use .Projects-Wrapper or .project-boxes and they don't work and you might not know why. If you keep everything lowercase, you will never have a problem with cases There are certain systems which do use cases, but if you're just naming, use lowercase
RMON
RMON10mo ago
Oh i getchu alright, thank you! And one more thing, Let's say if I were to add images inside of a container but that img is to big and screws up the container what could I do to fix that? I have a few ideas of what I can do but Im not 100% sure on them
Zoë
Zoë10mo ago
You can set max-height: 25% and then object-fit: cover, so if you had a really tall image it would be squashed but you won't end up with weird scaling, just parts will be cropped out. Also use align-self: stretch to use up the whole width (rather than using width)
RMON
RMON10mo ago
I wanted to add an img inside the container that states "coming soon" but it's a literal giant
Zoë
Zoë10mo ago
The dimensions of the image are not a concern layout wise using what we have set up (although it is an issue bandwidth wise, you should resize images to the maximum size you expect them to be displayed at, there are fancier techniques but just resizing is fine)
RMON
RMON10mo ago
No description
RMON
RMON10mo ago
Literal giant .. I had to zoom out all the way lmfao I wanted to get that img and place it inside the four containers I created
Zoë
Zoë10mo ago
The box is not set up correctly then. The box should have
.project-box {
display: flex;
flex-direction: column;
min-height: 35rem;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0px 0px 10px 2px rgb(0 10 26 / 41%);
}

.project-box img {
align-self: stretch;
max-height: 25%;
object-fit: cover;
}

.project-box p:last-of-type {
flex-grow: 1;
}
.project-box {
display: flex;
flex-direction: column;
min-height: 35rem;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0px 0px 10px 2px rgb(0 10 26 / 41%);
}

.project-box img {
align-self: stretch;
max-height: 25%;
object-fit: cover;
}

.project-box p:last-of-type {
flex-grow: 1;
}
RMON
RMON10mo ago
Could you explain what you've changed? Also regarding the height, It's fine if I were to change it to make the picture fit in better correct? It's to short.
Zoë
Zoë10mo ago
I made the box flex as a column, made img take up full width and no more than 25% of the box height (feel free to tweak it to your liking), and made the last p element take up excess space (creating a visual gap between the text and the button) You can change anything, with flex and grid they accomodate sizes and avoid magic numbers
RMON
RMON10mo ago
I ended up changing it to "100%" but sadly it hasn't fully filled the container
RMON
RMON10mo ago
No description
RMON
RMON10mo ago
also would it be fine to change the img border to copy the container border? I dislike the sharp edges.
Zoë
Zoë10mo ago
Does it have object-fit: cover? Forgot to mention that
RMON
RMON10mo ago
it does
Zoë
Zoë10mo ago
1 sec, getting out of bed
RMON
RMON10mo ago
Im sorry, I didn't expect you to do all that just to help
Zoë
Zoë10mo ago
Wait, max-height isn't enforcing it to be 100%, just that it can go up to that. If you want the image to fill up the card change it to height
RMON
RMON10mo ago
It worked.. See sometimes the fixes are so simple
Zoë
Zoë10mo ago
Although if you're using it as a background you may want to use background-image: url(https://....) instead with background-position: center and background-size: cover
RMON
RMON10mo ago
What would be the difference? Right now im using <img src> to target it in HTML then messin with the styling in CSS
Zoë
Zoë10mo ago
You can more easily put other content on top, it also respects border radius without you needing to specify the radius on the image or hide overflow, you also can't right click it or drag it which has some use. background-image is just designed for using images as backgrounds. It is a little trickier to generate the HTML however, using img you can just change the src but using background-image you'll need to change the style on the card targeting background-image You can use img, it just might not be the best method. If you will have things like text on the card too, it would be better to use a background-image as otherwise you'll be dealing with using grid to layer the elements on top of each other
RMON
RMON10mo ago
Regarding IMG It wont really be messing with much if you recall the img I sent you earlier I plan on having it look pretty much exact like this
No description
RMON
RMON10mo ago
The text being away from the IMG and the IMG having it's own space
Zoë
Zoë10mo ago
I was just saying for if you wanted to cover a card with an image
RMON
RMON10mo ago
I see, Alright thank you for all the help!
Zoë
Zoë10mo ago
I am going to sleep, as it's almost 4am. Other people will be able to help you if you need more assistance
RMON
RMON10mo ago
Alright, Good night thank you for all the help!
Want results from more Discord servers?
Add your server