It’s me again! I’ve gotten to the point where my personal portfolio passes all the tests, and I could submit it… but I’m still not totally happy with it. I have been studying flexbox and grid constantly, and I thought I was getting a better hang on it. I think the display looks okay on desktop, but -as always- when I go to a smaller screen size things go downhill.
I am still not finding the answer to these problems. I’m googling everything I can think of, I did a Scrimba tutorial, I’ve doing Kevin Powell’s Responsive Web course… But obviously I still don’t get it. Can someone take a look and point me in the right direction?
Any other general feedback welcome too.
Firstly if your still struggling try my links to the net ninja series from a few days ago, Kevin Powell is good but net ninja I think is easier to follow and understand, infact I think he’s the best of all of them and I have watched a lot.
You should go ahead and submit because you can still keep working on it if you want to for as long as you like. I submitted my projects a while ago but only today put my product landing page into the feedback section because I have completely restyled it to be less based on the fcc example and I wondered if my color choices were too bold.
Grid template areas I think is a fairly easy thing to understand though it does taks some typing. When I have 4 boxes in a div and want 2 per row but then only 1 per row in media queries it would look like
grid-template-areas:
“box1 box2”
“box3 box4”;
then in the media query I would switch it to
grid-template-areas:
“box1”
“box2”
“box3”
“box4”;
In the css for each individual box you tell it which grid area it belongs to ie
firstbox {
grid-area:box1;
}
That’s right it goes in the container as you do with grid template rows etc, I find it super helpfull to actually see the grid on screen, you can name things whatever you like but it’s best to give all of them the same length name so your little onsceen grid lines up nicely.
I used it for my product landing page which is up for feedback now ,to have a paragraph on the left with a picture on the right but then reverse that on the next row down so a picture was on the left and paragraph on the right, then for the media query just one item per row
