QR Code Page with HTML and CSS

Community feedback

• 

  Ashok Kumar Dharanikota•210

  @Ashok-Kumar-dharanikotaPosted about 1 year ago

  hello Furkan,

  That's really good work. You almost managed to meet the design. In my starting time, I also faced this thing "How to center a div", After practicing a few challenges I learned how to implement it. My only advice is to keep going. do mistakes learn from them and keep that learning cycle. (I am not an expert here but just sharing my experience) All the best for the next challenges.

  Marked as helpful

  1
• 

  Claudio Netto Junior•180

  @claudionettoPosted about 1 year ago

  The easiest way to do this is to use flexbox centering, just add the following to the body (the parent element containing the card):

  First, set the height to 100vh, which is 100% of the height visible on the screen: height: 100vh;

  Use the flex display: display: flex;

  Using the flex properties, first define that it will be arranged in columns and then center it on the primary and secondary axes using: flex-direction: column; justify-content: center; align-items: center;

  1

  ---

  

  Furkan•20

  @ufrkanPosted about 1 year ago

  @claudionetto I tried all the solutions in the comments. specifically these codes: display: flex; justify-content: center; align-items: center;

  This code worked in other projects I wrote. just a bug not working in this project. I think I am the first person in the world to do this.

  0

  

  Claudio Netto Junior•180

  @claudionettoPosted about 1 year ago

  @ufrkan Did you set the height to 100vh in the body? I took your code and implemented the changes and it worked. It's also good to change the width to 100%, because on screens wider than 1440 the content won't be centered.

  Marked as helpful

  1

  

  Furkan•20

  @ufrkanPosted about 1 year ago

  @claudionetto it worked! thank you

  0
• 

  Lucas•50

  @Luftjunkie19Posted about 1 year ago

  Try to add to the page

  .page{ display:flex; justify-content:center; align-items:center; } If it will move anywhere, try also to add the same to the body, but add also flex-direction:column;

  Once you're done, write here down.

  1

  ---

  

  Furkan•20

  @ufrkanPosted about 1 year ago

  @Luftjunkie19 I tried all the solutions in the comments. specifically these codes: display: flex; justify-content: center; align-items: center;

  This code worked in other projects I wrote. just a bug not working in this project. I think I am the first person in the world to do this.

  0
• 

  Lucas•50

  @Luftjunkie19Posted about 1 year ago

  Actually i got a glimpse of your code, and i couldn't really get it at all. So if you want you can check how i solved it.

  0