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?
62 Replies
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..
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 gridThey 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.
I wouldn't do that, I would do a grid and to not use magic numbers in media queries
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)
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.
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 overflowGosh, 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!
No problem, any time
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.
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
Alright thank you so much!
I have a question, Im having trouble moving the content inside the container further down how can I achieve this?
You could have flex column with
justify-content: center on the container. Also have a align-items: centerThis is all the code I have exactly for the content inside
Justify-content doesn't do anything in this case?
Ah right, this in the project box. I meant "container" generally, whatever the text and stuff was inside
See it's centered nicely but I wanted to recreate this design
I just don't have an IMG yet
to display the projects Ill be creating soon
Oh I see, remove
justify-content and then in the text container set it to flex-grow: 1Ok let me try this
?
No sorry, inside the project box you'll have something like
.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
Ignore the bad spacing it does that when I copy and paste it
but thats the code for it
You could also just set
p:last-of-type to flex-grow:1 instead and leave the HTML as-ishmm
what does p:last-of-type do?
Ive never heard of it
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 itIs that a css element?
or
no
It's a CSS selector
(also I'd remove capitalisation from your class names)
How come?
It's non-standard to use capitalisation
Can it screw up? Or is it just not normal to do that
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 lowercaseOh 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
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)I wanted to add an img inside the container that states "coming soon" but it's a literal giant
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)
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
The box is not set up correctly then. The box should have
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.
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 numbersI ended up changing it to "100%" but sadly it hasn't fully filled the container
also would it be fine to change the img border to copy the container border? I dislike the sharp edges.
Does it have
object-fit: cover? Forgot to mention thatit does
1 sec, getting out of bed
Im sorry, I didn't expect you to do all that just to help
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 heightIt worked..
See sometimes the fixes are so simple
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: coverWhat would be the difference?
Right now im using <img src> to target it in HTML then messin with the styling in CSS
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 otherRegarding 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
The text being away from the IMG and the IMG having it's own space
I was just saying for if you wanted to cover a card with an image
I see, Alright thank you for all the help!
I am going to sleep, as it's almost 4am. Other people will be able to help you if you need more assistance
Alright, Good night thank you for all the help!