DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on • Updated on

Self-Taught Developer Journal, Day 17: TOP Landing Page Cont.: Completing the Second Section


Thinking Through The Odin Project Landing Page cont.

The Odin Project Project Landing Page Full Design Image
Continuing with the second section, I centered the image-box and text in their image-container, but I need to fit the text underneath the box aligned with the box's left and right edge.
My Landing Page Second Section Progress
To adjust it, I tried adding padding for the left and right in the text-container class. While it made the text align with box edges, it made me realize that there was still a lot of space between the boxes.
My Landing Page Second Section Progress Padding
So I went ahead and removed the text padding, and focused on minimizing the width of the images class that contains all four boxes and text. I set the width to 60% and that helped shrink the spaces between the boxes.
My Landing Page Second Section Progress Width
After messing with the padding left and right again for the text-container, the image text still wasn't fitting like I wanted it to. Then I noticed I should set the same width for the image-box and text-container to have their spacing relative to each other. I also increased the image-box width and height so the text doesn't wrap as much. I set the font-size for the image text to small and text-align to center. Lastly, I increased the height of the second section to 30vh or 30% of the viewport height (The viewport is the visible area of your page in the browser you are using to view a site).
My Landing Page Second Section

Next, I will be working on the third section of the Landing Page.


The Odin Project Landing Page Project

Day 16:
Please refer to Starting My Self-Taught Developer Journey for context.

Discussion (2)

magenot profile image

This is so awesome! I am self-taught as well and never thought about creating a journal about all the fun things you learn along the way. I even ran into similar issues you mentioned and tackled it a different way with React & media queries.

jennifer_tieu profile image
Jennifer Tieu Author

Thank you! It's definitely been helpful documenting, I can see myself growing and getting better. Interesting, I haven't learned React yet so I'm not sure how to use it and I think I've seen media queries used before.