Help a fella make his project section look better?
https://callum-laing.com/
https://github.com/callum-laing/portfolio-v4
I'm struggling to make the project section look less crappy, and I think the better way to do this is by following what I've expertly designed on this image..
I have my project card, and within that I have my h2, p, and image elements..
How exactly do you code this? My current assumption is that I contain the h2, p, and 2 links together, leave the image on its own, and use a grid-template-columns: 1fr 1fr but that didn't seem to work, so now I'm kinda stumped...
GitHub
GitHub - callum-laing/portfolio-v4: Web Dev portfolio built in Svel...
Web Dev portfolio built in Svelte/Vite. Contribute to callum-laing/portfolio-v4 development by creating an account on GitHub.
1 Reply
If it were me, I’d pretty much do what you said. Encase the header, paragraph and links in a div, and whilst you can leave the image on its own, I’d opt to wrap it in a div too since you want the grid to control the content rather than the content.
Then it’s a matter of scaling the image with
height: 100% (optional) so it matches your text height keeping a cleaner look for the links at the bottom design. At that point you’re pretty much good to go. You have a range of options for responsiveness too, minmax, @media/@container etc.