Grid Confusion
Hello,
My code is located at: https://codepen.io/CarsonStudies/pen/qBQqjQR
I am new to the world of web dev and am struggling with adding a grid to my webpage. I've attached a picture of what the web page looks like.
I am trying to get the page to scroll so I can add text below the front page image. However, I keep running into issues with the image disappearing or the title text moving around.
Any assistance/guidance would be greatly appreciated.
Carson
6 Replies
You used
position: abosolute to position this text. I can't see you using grid anywhere?First off, thanks for sharing a codepen :D.
I added a bunch of text just to see what would happen... and it seems to work okay?
The main issues at the moment, for me, involve the use of
position: fixed and absolute. They can be useful in the right situation, but in general it's best to avoid them unless you have a specific use case where they can help out.
As StefanH said, you mentioned trying to add a grid, but I don't see any on the page right now. Could you let us know what you tried?If you wish to stack the text and image, I recommend using grid like kevin did here https://youtu.be/JHregeIsjPQ?t=137
Using absolute positioning like this really ends up causing more and more headaches along the road. You had to put a fixed margin on your content after all
Another small thing I noticed is that you have 2
main tags in your html
Seems like you used position: absolute for pretty much everything here, including the image and the footer
Avoid position: absolute for layouts like this. I recommend looking into CSS grid. Kevin made tons of beginner videos about thatThanks I am looking at some right now. 🙂