Skip to content
Submitted 3 months ago

Responsive Qr-code website using CSS

#pure-css
Pelumi Aiyebola•80
@Pelumi72
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?

I was able to use media query and this is my first actual website. I am happy about how I structured the HTML and how I styled using CSS

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

The site had to be responsive for laptops and phones as well. I couldn't tell if the media query I used worked but I solved that by using codeply to view my code and I could make further adjustment to make sure the phone design fit the one in the design folder.

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

Well, I will love it if I could be able to find a way to make this site more responsive if possible.

Community feedback

  • Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777Posted 3 months ago

    I saw your coding it is good but I think it needs a lot of modification: .qr-code{ background-color: hsl(0 0 100%); padding: 1rem; border-radius: 5%; width: 320px } The container should not be centered with the margin like you use margin: 8% 39%; but give the body height 100vh and flexbox you can center the container in the middle in element body use this body { background-color: hsl(212, 45%, 89%); text-align: center; font-family: "Outfit"; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 2rem; } ,and the image you can use width 320px .

    ,then you can remove media query because we used a width of 320 and used the flexbox properties to center the container. @media (max-width: 373px) { .qr-code { margin: 30% 5%; }

    Marked as helpful
    1
    Pelumi Aiyebola•80
    @Pelumi72Posted 3 months ago

    @Mahmoud-Abdelkarim777 Thank you for your feedback. I will implement what you've said to the site

    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