Skip to content
Submitted 3 months ago

Preview page with HTML, CSS, and vanilla Javascript

Gina Wang•170
@gina-wang-1021
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Learnt how to implement javascript!

What challenges did you encounter, and how did you overcome them?

I didn't know how to structure the DOM so that the pop-out can react in different ways when viewed in different sizes of viewports but eventually solved the problem after asking for advice in the discord community!

What specific areas of your project would you like help with?

There are multiple areas that I was struggling in - would love any advice on how to approach them!

  1. How do I create a tailwind for the popout? I saw a great approach using position absolute for the :after element and position it in relation to the popout, but my popout is itself positioned absolute so I couldn't us this approach.
  2. For the desktop view, I'm currently positioning the popout with top and left properties, however, I had to calculate the px for both of these properties to center the popout according to the share button. Would appreciate any ideas that would make this more responsive and straightforward!
  3. I can't figure out a way to make the share button align with both the author's information and the share popout in all devices size. At some point when I shrink the viewport to a size between desktop and mobile, the share button is positioned weirdly (it always stays horizontally aligned with the author's information, but it's a lot higher compared to the popout)

Would appreciate any ideas to solve these problems! Thank you.

Community feedback

  • mantis•240
    @morauszkiaPosted 3 months ago

    You can create a tail for the popout either using an ::after pseoudo-element of a square shape and rotate it, and position it (using absolute) relative to the popup element, and then rotate and translate it, and add a z-index lower than the popup, so that only a triangle is seen and is right in the centre. The other solution is to use a thick top border on a 0x0px ::after element. (I used the first solution, but you can find examples for the second online) You can position the popup using calc directly in the css, and add together % values, custom properties, etc. so that if anything changes, it adapts automatically. I used a custom property for the height of the author part and positioned everything vertically in the middle, and then I used the same height (var(--footer-height)) for the popup on smaller screens, and positioned everything vertically in the middle, and so they are nicely alligned. I hope I was able to help you, or at least give you some suggestions to think over! Good job otherwise and happy coding in the future!

    Marked as helpful
    0
    Gina Wang•170
    @gina-wang-1021Posted 3 months ago

    @morauszkia thank you for the advice! I'll look into those solutions.

    0

Please log in to post a comment

Log in with GitHub

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