QR Code Challenge HTML/CSS

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Heyo,

  You answered your question already :) Yes, it can cause problems. You can remove all of that code and simply add this snippet to the body:

  display: grid;
  place-items: center;
  min-height: 100vh;
  

  Flexbox would work just as well btw, if you prefer that!

  Both the container and the image could be made responsive, like so:

  1. For the container, swap width for max-width.

  2. For the image, you can add this:

  max-width: 100%;
  height: auto;
  display: block;
  

  This following snippet is nice to keep in mind for the future as well, whenever you'd like to make your images resize responsively.

  Hacky or not, I'd say you did a good job here. It looks pretty much like the design. Just some adjustments need to be made in regards of best practices ^_^

  Marked as helpful

  2

  ---

  

  Sam Hemingway•180

  @SamHemingwayPosted over 2 years ago

  @FluffyKas Thank you so much for the detailed feedback! Starting to learn that "if it feels hacky, then it's probably hacky..." 😅

  We're using the body tag here for display: grid; if this was a modal on an existing page, I imagine that I would be creating a parent container for the modal to achieve this (I'm assuming that the body tag in this hypothetical situation isn't using display: grid).

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @SamHemingway Really depends on the situation >.< For a modal you may just end up using position: absolute anyway, as that will be on top of everything else but yeah.. in most cases, it's best to use grid or flexbox on the body or the parent container! When you can't manage with either one of these, that's when it might make sense to do a position: absolute.

  Marked as helpful

  1

  

  Sam Hemingway•180

  @SamHemingwayPosted over 2 years ago

  @FluffyKas Thanks for the further insight!

  Just seen that this method isn't working on Safari so trying to figure that out :) good practice for me!

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @SamHemingway Which method isn't working?

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @SamHemingway Grid and flexbox are old things, they work on all browsers now (well, alright IE doesn't support place-items, I admit) so the problem is probably something else. I don't have a Safari to test it - apart from my phone - but if you send me a screenshot of your css on Slack, I might be able to help. Unless you figured it out by yourself, which is great :)

  0

  

  Sam Hemingway•180

  @SamHemingwayPosted over 2 years ago

  @FluffyKas

  Figured it out, rookie error on my part: seems like I simply didn't have a child div which was messing it up.

  Fixed it by adding a child div (.qrCode) and all appears to be well! What still confuses me though is why it appeared to work on Chrome but not Safari...

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @SamHemingway

  I'm really glad you managed to solve it ^_^

  Hehe, I had some of those moments a few months earlier, when everything looked awesome in Firefox but was a total mess in Chrome >.< It's like that sometimes.. But the more you practice the less frequently it happens (or at least it will become easier to debug >.<)

  0