Skip to content
Submitted 8 months ago

HTML, CSS, CSS Flex-box.

VakhoCloud•190
@VakhoCloud
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

It's working fine on 1920 x 1080 and browser scale of 100%, but everything is on mess when scale changes. also it was quite challenging because desktop version has different action on share button. mobile version was really easy, it was working well but after changes it has same behavior as desktop because of transform: transition(), is there any advice?

Community feedback

  • Ashong•930
    @AshongAbdallah06Posted 8 months ago

    Wrap the code in a main element. Remove the display: flex; justify-content: center; align-items: center; on the body and put on the main. And set the flex-direction: column. This way, you can just flip it to flex-direction: row for the desktop UI.

    You can check out mine for reference. Happy coding🎉

    Marked as helpful
    0
    VakhoCloud•190
    @VakhoCloudPosted 8 months ago

    @AshongAbdallah06 thanks.

    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