Skip to content
Submitted 3 months ago

Mobile-first solution using CSS Flex, adaptive web

Alisa•30
@alisaTonga
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

That's my first adaptive web. I stragle most with Css code aligning elements and trying to make it adaptive.

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

As i told that was my first time doing it, i found youtube video and did almost the same thing.

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

I think right now styling the web is my issue. I;m writting code but sometimes i dont complitely undersand consequences of some parts of code.

Community feedback

  • yuval nisim•420
    @nisimi96Posted 3 months ago

    good job!

    i do think you wanna work on the flex\grid thing. as you can see you main object is off the center try to add and remove some staff because it small project not need to use main so you dont get confused. try to use display flex on body tag and keep it same just in css do body + justify content center and align items center maybe get you better position

    then use the .block as the organizer for the elements that come in side maybe even ! display flex > flex direction ; column that way you don't need to use <br> because all element will come one after one as there DNA is flex column

    love it i will give this challenge a try now to see what is my result

    keep it up , Yuval

    Marked as helpful
    0
  • 🔅 Yuliya 🐈•240
    @O-Julia-OPosted 3 months ago

    Hello, Alisa!

    You are doing a great job!

    Here are some links which tells you more about aligning items on page.

    FlexBox: https://css-tricks.com/snippets/css/a-guide-to-flexbox

    Grid: https://css-tricks.com/snippets/css/complete-guide-grid

    Keep coding :)

    Marked as helpful
    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