Skip to content
Submitted about 3 years ago

Article Preview Component

Jonathan•295
@Nathan-Front
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

Update version: Changes:

  1. Button change color (image) from hover to change the color (image) change when clicked.
  2. Divided the width into three, 1440px, 1000px, 320px for its responsiveness since its having some problems on the elements.
  3. Tried to set size of the picture to absolute value since sizes was getting large when its in responsive state.
  4. and some minute detail changes. Any feedback/suggestions to make this much more better are much appreciated.

Community feedback

  • Account deleted

    Hi,

    Nice one I think your solution looks good.

    • You should have it at max-width : 1440px because when you go beyond that things start to not look good.
    • Give the arrow button a fixed padding because when you resize it gets big, then small and the big again, not sure what's happening to it.
    • When the layout changes to mobile at some point the part with the text expands onto the image, it starts happening around 480px so anything below that doesn't looks good.

    Fixing those issues will make it a lot better.

    Keep coding👍.

    Marked as helpful
    1
    Jonathan•295
    @Nathan-FrontPosted about 3 years ago

    @thulanigamtee Oh now I see why the width of these challenges is 1440px. Don't have wide screen that's why I did not bother checking it in a wider screen. Yeah I`ll try to figure out about the arrow and text. Thanks once again!

    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