Submitted 5 months ago

Article-preview-component

Uche Ofatu•350

@Macnelson9

A solution to the Article preview component challenge

Preview Code

Solution retrospective

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

I am most proud of myself for completing this challenge.

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

I encountered a challenge with arranging the image and the text side by side dynamically.

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

I'd like help with the UI.

Code

Please log in to post a comment

Community feedback

zeegu•430

@zeegu

Posted 5 months ago

Great job!

Image size change

Img.drawers keeps changing depending on screen size. How about setting a fixed width&height instead of 100%?

Share icon

I recommend adding svg as child element of <div class = "backgroundshare2"> .

<div class = "backgroundshare2">
   <img src="./images/icon-share.svg" class="share" alt="Share">
</div>

And then adding CSS element makes it easier to handle.

.backgroundshare2{
  border-radius: 100%;
  display: grid;
  place-content: center;
}

If you want to change the color of share icon, try this instead of <img>

<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13">
  <path
  d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"></path>
</svg>

And then add CSS. 'fill:' would control the svg fill color.

.backgroundshare2{
 background-color: var(--LightGrayishBlue);
 fill: var(--VeryDarkGrayishBlue);
}

Marked as helpful

Uche Ofatu•350
@Macnelson9
Posted 4 months ago
Thank you for your feedback. I'll improve the app using your feedback.

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