Skip to content
Submitted about 2 years ago

Article Preview Component Vanilla HTML CSS and Javascript

Lisa Allen•530
@CrypticMango
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

I have a few questions about how to achieve the correct look on this project;

  1. How do I change the color of an SVG when it's in an image tag?
  2. How do I get the "speech bubble" look on the share panel in desktop view? Is creating a new div, styling a triangle, and using position to place it correctly the only way?
  3. In desktop view, how do I make it so the share panel is always going to be above the share button when clicked no matter how big or small the user's screen size is?

Community feedback

  • Daniel Perez Romo•70
    @Daniel77aprPosted about 2 years ago

    Hey, Shawtii!

    1. You need to use an svg tag, not an img tag. You can then set the fill property in CSS to change its color.
    2. What I did is make a div element with the desired weight and height, set rotate to 45deg and adjust its position. There are ways to make triangles by changing a div's border like shown on this video, but this works just fine since you can cover half of the square when positioning it to make it look like a triangle.
    3. You can use position: absolute and translate which lets you set its x and y position relative to itself so it is always at the right place. I did the same with the triangle div that we talked about in the second question.

    I hope this helps!

    0
    Lisa Allen•530
    @CrypticMangoPosted about 2 years ago

    @Daniel77apr

    Hello!

    Thank you for this, this helps me a lot so I can get my project looking like it should.

    1

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