Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article preview component using HTML5, CSS3 and Javascript

@joseeduardorp

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, I was wondering if there is another way to position the field with social networks in the design made for desktop?

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hello, José Eduardo! 👋

Good effort on this challenge! 👍 The card component looks nice and is responsive! 🙌

In order to position the social media popup relative to the card component, you need to add position: relative to the card component itself (otherwise, the social media popup will be positioned relative to the page itself, which probably isn't what you want). From there, you can adjust the bottom and right properties of the popup in the desktop layout until it's positioned where you like it. 😉

Also, as far as semantic HTML goes, I suggest using the article tag (not the main tag) for the card component as a whole, since the card component is a self-contained, well, component, and not the main part of a regular webpage. Then, simply use divs to group elements inside the card component (not any section tags since this is just a small component). 😀

Hope that helps! 👍

Keep coding (and happy coding, too)! 😁

2

@joseeduardorp

Posted

@ApplePieGiraffe Thanks for the feedback and the tips, I'll put them into practice

1

@AgataLiberska

Posted

Hi José, I had a look at your code and I think the issue is that you have the social media box positioned absolutely in relation to the whole card (section element), not something within the card. What I would do is modify the HTML and nest elements a bit more (hope it makes sense), it would probably make things easier.

There may be a better solution to this, but that's where I would start :)

1

@joseeduardorp

Posted

Thanks for the feedback, I will try to do what you said!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord