I decided to try doing the mobile design first then moving onto the main grid desktop view but it seems more compliated.
What’s going on with my grid, why aren’t they all sitting nicely in 1ft columns? The boxes are also overlapping eachother.
I realy want to get into a pattern of learning to do mobile first but getting annoyed at this ha! Usually I can do grid basics fine but doing mobile first has confused me. Am I focusing on the right containers? Is my main grid the correct container (section)?
my mobile finishes at @media screen and (min-width: 620px). Which is where I want to use grid.
Bonus question: For a simple design like this, shoud I be using grid for the mobile screen so I can cleanly transform it to the desktop view?
Thats the mobile design done, now I want to change to a ‘desktop view’ at a min-width of 620px. This view will be done in a grid layout as in the photo.
The problem is I’m now not sure where to apply the container or the individual grid items; Each profile card is surrounded an article, do I add a class and use this as the grid?
It’s just annoying because here’s the page when I done desktop first not perfect but the basic CSS worked, now I’ve done the mobile first it’s just confused me.
I could use grid areas but I need to know what the page isn’t doing what I want. I have my maind grid container now (div) to control each individual box, where is best to place the display grid i.e the article containers?
**I’m going to re-read/watch some more CSS grid guides. Web dev is hair pulling stuff ha.
This is how I want my original project to be, when I give them a row/column they move to that row/column. Whereas my original project they’re staying in their 100% wide blocks.
I’ve given display:grid to a main container and to the articles but the profile cards don’t resize or budge. I’m assuming this is to do with my styling of them in mobile first rather than doing grid firsrt then mobile. (and of course my bad useage of display:grid on the wrong containers)
You are on the right track. Your narrow design works great, now you just need to add the grid layout for your wider design. Right now you are setting display: grid on div.grid-container but the articles are wrapped by a section. So you either need to get rid of that section or set the grid layout on the section instead.
Thanks bbsmooth. You helped on the other page, I’ve been trying to dissect your layout!
I see you had a div container for the main container but I couldn’t find what you applied for sub containers. [edit] apologies, I now see you had the section outside of the container. (I have it inside!)
It’s working now. I just have to sort out my template measurements but everything is moving on cue.
