Order Component Using HTML CSS and Flexbox

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Heyo,

  It's not a bad start but there's a few issues going on here ^^

  1. Using vw isn't a great solution for defining a width, at least not in itself. Your max-width should always be a fixed height, 30rem/400px for example (or whatever fits this challenge) . If this doesn't alone solve your problems, you can combine it with a width: 90% (just an example, again), the two together will take care of your widths on most screen sizes ^^

  2. Don't give the body a height, use min-height instead.

  3. Alt texts shouldn't contain the word image, picture etc, using an img element is self-explanatory. It's just supposed to be a text description for those who can't see the image, so "A lady listening to music via headphones" is perfect ^^

  4. Giving your images a display: block, max-width: 100% and height: auto will make sure they resize in a responsive way, you'll rarely ever need more than this. Your size problems right now come from other sources, like the widths on your containers.

  5. As for the button hover, I'd just keep the same colour and lower to opacity to like 0.8 on hover. Lowering opacity is frequently used for hovers, so just keep this in mind if you feel like you're struggling to come up with the "right colour".

  6. The box-shadow on the button also seems a bit off, try this instead: box-shadow: 0 15px 20px 0 hsla(245, 75%, 52%, .25). Reducing opacity on the colour is a great trick here too, if you'd like to make more realistic box-shadows.

  Marked as helpful

  3

  ---

  

  Dizzy_Sloth•50

  @TotallySlyPosted over 2 years ago

  @FluffyKas

  Thank you for your help and feedback.

  That is some great advice. I will play around with the code now! But this advice is just what I am looking for! Thank you so much.

  0
• 

  Byron•2,290

  @byronbyronPosted over 2 years ago

  Hey @TotallySly, it looks alright!

  For the button hover, I used a slight opacity instead of the background colour, something like:

  .payment--container button:hover,
  .payment--container button:focus {
      opacity: 0.75;
  }
  

  For the sizing thing, it depends on how picky your client is in the real world 😅. When I want to get the image size from the design image, I usually open it up in Preview (mac) and drag a square around the image to get the dimensions.

  For your Order Component, it looks like your background images aren't coming through. Something like this should help I think (feel free to play around with the background-size values):

  body {
      ...
      background: url(images/pattern-background-mobile.svg) no-repeat, top center hsl(225, 100%, 94%);
      background-size: 100% 194px;
  }
  
  @media screen and (min-width: 908px) {
      body {
          background-image: url(images/pattern-background-desktop.svg);
          background-size: contain;
      }
  

  Marked as helpful

  1

  ---

  

  Dizzy_Sloth•50

  @TotallySlyPosted over 2 years ago

  @byronbyron

  Ah strange about the images. But I see now, on the desktop, I don't have the line and the two differing colours. I will go back and fix this.

  I have a Windows Laptop, so I don't have access to preview... But good to know that it is client dependent. By the time I get to that stage of my journey, I am sure I will have found a way for this!

  0