Jude Nwafor• 110
@MistahJude
Submitted
Robel T. Hawelti
@Rapbit27
All comments
- Robel T. Hawelti• 100
@Rapbit27
Posted
Hello Jude,
Really nice work there! I was gonna comment on the background color for the cards and max-width for the wrapper, but I see you've fixed it on the live preview. One thing I would like to mention is setting a bottom margin as much as the top margin, which gives the items a centered feeling. Same thing in the mobile view, try giving it some left and right margins. Just my inexperienced opinion 😄😄
And keep at it!!
0 - Homey Poon• 60
@homeypoon
Submitted
Robel T. Hawelti• 100@Rapbit27
Posted
Hey, I think you posted the wrong solution.
0 - Damola Adesokan• 20
@AdesokanDamola
Submitted
What specific areas of your project would you like help with?
I will like to know how to style this page using CSS to make it responsive.
Robel T. Hawelti• 100@Rapbit27
Posted
Hello Damola,
You did good. As a supplementary knowledge I suggest you look into css flexbox and its effects. It can help you with placing your card relevant to the page, and also placing items in a div accordingly. I'm also a beginner and that's why its not as detailed but I hope this helps.
Keep at it!
Marked as helpful
0 - Sudhanshu Singh• 480
@sudhanshusingh-g
Submitted
Robel T. Hawelti• 100@Rapbit27
Posted
Hello Sudhanshu,
I'm not an expert so, I think I am going to generalize my advice. Sorry for not going into details, but try looking into responsive designs, max-width, cards, containers, and such. I think you can work on the styling and do a much better job.
Keep at it!!
0 - PAditya Roshadi• 50
@aditros
Submitted
What are you most proud of, and what would you do differently next time?
I like the color
What challenges did you encounter, and how did you overcome them?
responsive design, I probably need to revisit it later
Robel T. Hawelti• 100@Rapbit27
Posted
Hello Aditya,
I'm gonna try and put some pointers out there, although I'm not far off from your level, they are advises I got during my previous challenge. Its an exact quote word for word:
"Your solution looks good on larger screen sizes but not so good on mobile screens. The go-to is to account for screens with a width from 320px up. Your containers use a fixed width, which is generally not good. Let the elements take up the space that they need - that's what makes your site responsive. If you give the outer container and the card a max-width instead of a fixed width, then you should already see what I mean.
Furthermore I advise you to go through the learning paths here on FEM or reading the MDN documentation about the main rules of semantic HTML. Your site should have a <main> element and since there is no <header> provided by the challenge, you could have just left it out for this one, but the attribution fits perfectly inside a <footer> element (sibling to the <main>)
Also there are general rules for CSS which you should look at again: Do not declare font-related CSS styles in px, this makes the website inaccessible to people that declared a custom font-size in their browser. Using rem accounts for that.
Another quick tip from my side, it's generally easier and more common to use (min-width) media queries, so going "mobile-first". On larger layouts you'll have it easier, because stuff just stacks on top of each other in mobile views most of the time. This is the default behavior of block elements. Then you only have to add min-width media queries for larger screens to add the neccessary styles. 😀
I strongly advise you to go through your code and look at it again to fix at least the stuff I pointed out and also re-test your site with the help of the developer tools of your browser for different screen sizes. You should at least use Firefox and Chrome to ensure it works for most of the users."
I hope this helps you just as much as I found it helpful, and keep at it!!
0 - Megha S Patil• 70
@meghaspatil1
Submitted
What are you most proud of, and what would you do differently next time?
The first challenge is lag with the background setup not being proper, but this type understood the mistake and was done with it.
What challenges did you encounter, and how did you overcome them?
experience with the author section's inability to adjust the image size using the name of the author. then, after watching videos and doing some research, I realized that Flex was simple.
What specific areas of your project would you like help with?
A particular region in outline shadow, or an alternative method for employing shadow that is more adaptable. if so, let me know.
Robel T. Hawelti• 100@Rapbit27
Posted
For the outline shadow you can use box-shadow property. boxshadow: 10px 10px 5px ;
The first two values are for the right and bottom shadows, and the third value is for blurring the edges.
0 - hannasham• 40
@hannasham
Submitted
Robel T. Hawelti• 100@Rapbit27
Posted
Hi there, your code looks okay. But if I have to point out some feedback:
- Try giving the card a specific width and height from the designs. (around 322px, 499px)
- For the alignment, how about using flex display, and then setting the align-items and justify-content properties to center. And also set the flex-direction to column.
- Last but not least, you did an overall good job and keep at it!!
0
