Fixing my layout from desktop to phone
Hey, I'm working on figuring out the basic layout for my portfolio website and started building out a block-out of my design I made in Figma. I'm struggling with using the full viewport on phone. My homepage has 3 cards and on desktop they are placed in 2 even-columns. However, on phone I want the first card to fit the whole viewport and then the other 2 cards will also use up a whole viewport when scrolling down.
I've got the basic layout working for desktop and tablet sized screens, just not for phone. Seems like it's not using the full viewport size.
Here is my code: https://codepen.io/Hidde2205/pen/ExqwJYP
I've also added my designs for reference, any help is appreciated! If my current code that seems to work for desktop and tablet can also be made easier or better, please let me know đ
16 Replies
The design on the right is for devices on portrait mode basically (max-width: 768px). The blue card would be the only thing u see when opening the website and the other 2 cards will be the only thing u see when u are scrolled down all the way.
You could simplify this down to three cards directly in container and use two columns three rows
Then in your media query just redefine the areas
Let's say another page needs more columns or rows, I just only do that for that page? I used a 12 column and 8 rows layout in Figma, so I thought let me make a grid-template with those columns and rows
I've made some adjustments, but I can't seem to center the container div with the grid whilst remaining a minimum margin on the left and right of 4rem. Right now I have centered it by doing margin: 4rem auto; however when making the screen smaller the grid will stick to the sides. Removing auto on margin does work, besides the fact that it's no longer centered. I tried using flex on the body and center everything, but then it all disappears.
Here is my new codepen: https://codepen.io/Hidde2205/pen/NWQwgaX
For margin on the left and right/inline axis, you can use
margin-inline: auto;
When using the shorthand margin: 4rem auto, youâre adding 4rem to margin-block which is margin top and bottom , and auto to left and right/inline axis. In the shorthand , when you have two values , the first value is for top and bottom, the second value is for left and right.
If you want a minimum of 4rem on each side as well as keeping it centered, why not use the 4rem as padding? Then adjust the width to account for it
That makes a lot more sense, I tried adding padding before but just made the cards bigger but with this calculation it fixes it. I don't really understand why but the minimum margin-inline is the same as the padding. I just dropped down the padding to 2 rem so it does the same spacing, but idk what's the reasoning behind it
Iâm not sure what your code was that made the cards bigger so canât answer that but looking at your codepen , youâre still adding the margin to the vertical axis (top and bottom) with your margin shorthand
margin: 4rem auto but then you are subtracting it from the min-height; must be what you wanted to do . And donât see a padding declaration.
Just remember inline is horizontal direction (logical properties for margin-left/margin-right or padding-left/padding-right; also known as margin-inline-start/margin-inline-end padding-inline-start/padding-inline-end) and block is vertical direction (eg margin-top/margin-bottom , padding-top/padding-bottom aka margin-block-start/margin-block-end , padding-block-start/padding-block-end) .Yeah must of been that
Failing so hard right now and I am being clueless. Honestly don't know if this has saving potential or just need to be re-build with a different approach. Here is the codepen (unfortanetly doesn't have images): https://codepen.io/Hidde2205/pen/qBeVvME
Also I know the 12 column and 8 row might be overkill for just this screen, but I think it fits the project since other pages will have different lay-outs so I can just use the same classes for the main-grid
I guess what I am trying to manage are cards that grow and shrink in size due to the screen size its being captured on. The content within the cards just need to fit-in, for the card with the profile picture that would probably mean that the picture needs to shrink to make space for the text and button
Youre setting a fixed height on the container so itâs overflowing. Give your container
outline: 2px solid lime to see the boundaries.
Youâre making more work for yourself by making 12 cols but at least add an additional selector thatâs page specific with grid areas or create names grid lines on your reusable class that follows the pattern you need.
Redefining for your smaller screen sizes the way youâre doing it means you need to override each childâs grid cols and grid rows instead of just redefining grid areas or named grid lines on one selector.
Vs
Youâre trying to reuse one class and in the process youâre creating so many more css lines for this page. Just use one page specific selector to define the grid-areas. Or , more complex but still doable , create named grid lines that are reusable but also ask yourself , do you need 12 columns on any page or are you just following bootstrap conventions when that was created before we had better tools like css grid
And avoid setting fixed heights. Especially when youâre using grid where youâre defining rows , those will define the height . Or the content will if youâre using. And if you absolutely need to , set a min-height
If you must use 12 columns at least make it easy to redefine for different screen sizes. You may end up with your cards being sizes you donât want them to though esp if youâre setting width and height and then using 12 columns/8rows to fill that space. I too have a habit of over complicating things but given what youâve described I would do something like this
do a mobile first approach, according to kevin it should have the least resistance or code then possibly container or media queries and some clamps etc.. looks nice though
I appreciate the feedback and help once again! I'm looking to implement it, is this going the right way for the page layout?
The height is still a problem I assume
Honestly the
grid-template-areas with 12 columns looks ridiculous đ
I do believe I need 8 rows since .project-card = 5 rows and .project-info = 3 rows so this should be better?
Unless I make the columns not 1fr idk what's better?Yes height is a problem. Why are you setting a height at all , the content will determine it.
And agree you donât need twelve columns.
And I arbitrarily chose 768px for the media query , youâll need to decide what the right breakpoint is for your project and when they need to stack
The reason I was being so picky on the height is that I dont want scrolling for big screen sizes (anything bigger then
width: 768px). I want all the content to be visible for those bigger screen within a single viewport. For mobile devices or a tablet in portrait mode I can't really avoid that and I'm aiming for a simple vertically stacked layoutLooks like your content will fit in the viewport without having to set a height, you also don't want it overflowing. You maybe looking to set
Not a height on your wrapper. No fixed heights is about as close as you can get to a golden rule in css
Sounds clear, gonna try out some stuff again later today. Thanks!