Responsive Checkout Page with Flexbox

Community feedback

• 

  Iggy19944•160

  @Iggy19944Posted about 1 year ago

  This was my solution for the background. you wan to give the background color, because the white part is actually transparent. and you wan to give your image Background-repeat:no repeat;

  This is what it looked like for me

  body {
      background-color: hsl(225, 100%, 94%);
      background-image: url(images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
  

  Marked as helpful

  0

  ---

  

  Ayodesigns•120

  @AyodesignsPosted about 1 year ago

  @Iggy19944 Thanks, I actually forgot that was an option. Thanks for pointing it out

  1

  

  gfunk77•1,200

  @gfunk77Posted about 1 year ago

  @Iggy19944

  Note that there are two background designs provided, a mobile and desktop. On mobile, using the proper background, no-repeat works. On desktop larger screens, the code you provided will result in a fixed width and just cut off at the end. I checked out the site on yours and Ayodesigns projects and it happens on both. You can fix this easily by allowing the image to repeat on the x-axis. Also, the properties of background-repeat, background-image, and background-color can be set on one line. There are always many solutions to a challenge. I hope this is helpful.

  0

  

  Iggy19944•160

  @Iggy19944Posted about 1 year ago

  @Ayodesigns you are welcome.

  0
• 

  gfunk77•1,200

  @gfunk77Posted about 1 year ago

  Nice job on your solution. For the background, have you played around with using a background property on the main container, which in your case is the body? I think something like this will help.

  body {
  background: repeat-x url('./images/pattern-background-desktop.svg'), var(--pale-blue);
  }
  

  0

  ---

  

  Ayodesigns•120

  @AyodesignsPosted about 1 year ago

  Thanks, I will check it out @gfunk77

  0