Responsive page using flexbox and grid

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted almost 2 years ago

  Hey @Lwmeek,

  Nicely done! It looks great. I was going to make the same comment as @nelsonleone regarding the Instagram card. His suggestion is also how I solved the problem. As for the color theme, I would suggest taking a look at prefers-color-scheme as this will allow you to have the color scheme automatically be light/dark based on what the users has set as their preference.

  Here are some videos showing how this can be accomplished, as well as a way to use your css color variables. Going this route I was able to get the color toggle working with very few lines of code.

  
  const colorButton = document.querySelector(".header__color-toggle");
  
  colorButton.addEventListener("click", () => {
    document.body.classList.toggle("darkmode");
  });
  

  Anyways here's the links. Hope this was helpful!

  Kevin Powell

  Atila

  Keep up the great work!

  Marked as helpful

  1

  ---

  

  Timic Ivey•300

  @LwmeekPosted almost 2 years ago

  @12Kentos thanks for the feedback! I will definitely go back to my solution and implement this method to learn how it works and update. I honestly appreciate this a lot.

  1
• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  **HELLO....congrats on completing this challenge 🎉 🎉 🎉 **

  I have some tips for you on your question ,hope it was helpful. The lines on the cards(e.g instgarm gradient color). You can use the ::after or ::before class to achieve them . And for the instagram , it's a linear-gradient. setbackground: linear-gradient(to right,....gradient colors)**

  cards::after{
    content:"";
    width:100%;
   height:.3em(or any hat its best);
   position:absolute;
   top:0;
   left:0;
  background: --facebook-color / instagram -> linear-gradient(to right,--instagram-color)
  }
  

  Marked as helpful

  1

  ---

  

  Timic Ivey•300

  @LwmeekPosted almost 2 years ago

  @nelsonleone I appreciate this feedback it was a real struggle trying to figure out that part so I plan on trying this method out for sure and make sure its something I remember.

  0