Hi! I’ve been working away on my personal portfolio and this is the result so far:
I’m struggling with making it mobile-friendly. Could anyone help me with this? A few questions:
- How do I scale the background image in the welcome section so that it is visible in its entire width on mobile?
- How do I make sure all the items within the welcome section are actually displayed on the background image on mobile? Right now they overlap with the projects section on mobile.
- What would be the best way to increase the opacity of the background image of the welcome section?
- On desktop, why is there so much empty space under the projects section? Any way I can remove this?
Thank you so much for having a look! Any thoughts are much appreciated.
- Try using
cover for the size.
background: url(http://roamaniac.com/wp-content/uploads/2021/11/cropped-DSC_0280-scaled-1.jpg) no-repeat center / cover fixed;
You can add an overlay on the image if you want it to be less strong (example). Adjust the color and opacity as needed.
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.3)
no-repeat center / cover fixed;
- You have created 3 rows. Usually, you do not need to explicitly set the rows in the grid, I would suggest you just remove the
grid-template-rows. Maybe add some top/bottom padding.
Thank you @lasjorg - that was incredibly helpful. Managed to implement all these changes successfully. In hindsight I don’t think the opacity filter was needed but at least now I know how to do it!
Happy to have helped.
Using an overlay on background images is not a bad idea if you feel like the image is grabbing too much attention or is making the text that is on top of it hard to read.
If you use some colors for it as well you can also get a bit creative and change the feel of the image. It’s worth just trying to see what you can come up with and it’s hard to know before you see it, so just give it a try and ditch it if it doesn’t work.