Mobile only without JS

Community feedback

• 

  dania•530

  @adimidaniaPosted over 3 years ago

  Hey Goran! Congratulations on completing this challenge!

  • For the background image, you need to put background-image: URL("images/pattern-background-desktop.svg"); along with background-color: hsl(225, 100%, 94%);
  • Then, add to your .card element, background-color: white; and border: none;
  • Try to always include this in your style.css whenever you start a new project. It will save a lot of time and actual headache for you in both the long run and short run :

  *,*:before, *:after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  

  • After including the properties above, adjust the padding and the margins as you want.
  • You need to learn about media-queries to make your website responsive (looks good on all screens - mobile, desktop, tablet), and then try to apply what you learned on this challenge.

  Good luck! keep learning and keep coding!

  0

  ---

  

  Goran Dejanovic•30

  @gdejanovicPosted over 3 years ago

  @adimidania Thank you for your input I appreciate it. Every day I learn something new and CSS is amazing.. I used flexbut what do you suggest using flex or grid for aligning items inside cards?

  1

  

  dania•530

  @adimidaniaPosted over 3 years ago

  @gdejanovic You are welcome Goran! keep the hard work up. You can use both flex and grid layout for this challenge, but I would suggest flexbox since the card doesn't contain a complex layout.

  Marked as helpful

  1