Blog Preview Page
I'm just looking for tips and reviews of the code.
1- I feel like I didn't place the footer in the right way to the bottom, in some screens either it begins floating on the screen or it vanishes from it.
2- I'm struggling at making the responsivity (always centering the article)
3- The words, on the footer, stuck together when I used display: flex, so I had to put a gap on the code, but with that the dots also became distant, and that is annoying me.
Pls help
3 Replies
GitHub
GitHub - passamanii/project-03-blogpreview: A Simple Blog Preview
A Simple Blog Preview. Contribute to passamanii/project-03-blogpreview development by creating an account on GitHub.
Few things:
I don't particularly like this line 😄
color is inherited, so you can put it on the body and everything will get that color unless you overwrite it specifically with another selector.
text-align: justify generally is a typographic nightmare, and putting it on everything seems like overkill. If you do need it somewhere, apply it only where you need it (which is never, you never need it 😂) - (also, the frontend masters challenge doesn't use it)
As for the responsiveness and the footer, I's start by removing the padding-top from the main.
I'd probably use grid on the body instead of flex.
And take the height off the footer thing (maybe add a small amount of margin to the top and bottom).
I saw that you put a width and height on the article. In general, try to avoid declaring either one (specially height).
The web needs to be flexible, so you might have a second card that's the same, but with a longer amount of text, and suddenly the layout is broken.
Since this is a bit of a "one off" in that it's just a floating card on the page, I'd probably replace the width with max-width and simply remoev the height. The height will adjust.
Also remove them for the footer. There, just give it a bit of padding. You'll have space between the words if you remove the display: flex, which you don't need, since equal padding on the top and bottom will center everything fine 🙂 (if you did need to keep the display: flex, the other solution is to wrap all the text there in a <p>, so that the text stays as regular inline content and doesn't become flex items).I was rushing into projects, I will make a stop and go learn the base on courses. Thanks for the review Kavin.