HTML5 | CSS | Mobile First | CSS Custom Properties | Flexbox

Community feedback

• 

  hitmorecode•6,660

  @hitmorecodePosted over 1 year ago

  The problem with the background is because you needed to set the height of the page

  body {
  background: var(--bg-color);
  background-image: url(images/bg-mobile.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
  color: var(--main-color);
  text-align: center;
  min-height: 100vh; /* add this line, try and make it good practice and start using min-height 100vh */
  }
  
  @media (min-width: 724px) {
  body {
  background-image: url(images/bg-desktop.svg);
  /* background-position: left -4em bottom -2.5em; */ /* remove this line and your background will be fine */
  background-size: cover;
  text-align: left;
  /* width: fit-content; */ /* you can remove this */
  /* max-width: 100%; */ /* the width of the body is always 100%, you don't need to add this */
  }
  

  Marked as helpful

  0

  ---

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 1 year ago

  thank you so much! gonna try that now.@hitmorecode

  0