All comments

• 

  Tfk-teck• 50

  @Tfk-teck

  Submitted 9 months ago

  The challenge was not so difficult to achieve, as long as one person mastered the CSS GRID. I wish if you have a wink on my site, kindly leave me your comments please

  

  Page réactive avec CSS GRID

  1

  3

  0

  

  Tee• 190

  @thulanigamtee

  Posted 9 months ago

  Congrats on completing the solution

  Overall site is nice, mobile view is also good. One thing you should take into consideration is to fix the layout once you past the mobile view. At 366> it doesn't look good as it's already getting changed to desktop layout. Try to maybe incorporate a middle layout to make the transition between different screen sizes a little bit better.

  Once the screen gets big enough everything goes back to looking good, but everything goes bad once the screen gets too big. You should put a max-width on each container to avoid it getting stretched out on big screens.

  0

  This comment has received 1 replyShow
• 

  Kehinde• 270

  @kennsawyerr

  Submitted 9 months ago

  HI guys. Pls I do not know how to change the colors of a mockup image like the logo at the footer section .I really would value help on that. Also pls go through my code and give me reviews. I would appreciate the insights.Thanks

  

  Easybank landing page

  1

  2

  0

  

  Tee• 190

  @thulanigamtee

  Posted 9 months ago

  Congrats on completing the challenge

  You seem to have done a good job with the solution, but on mobile there seems to be some issues, like the mobile menu button not working, at least on my side. I think you should focus on getting the solution to look good on every screen size.

  And to change the logo, of which I believe it's an svg, you should make the copy of the svg and edit it to the color you want for the footer.

  Hope that helps.

  0
• 

  Diego Pasaye• 570

  @DiegoPasaye

  Submitted over 1 year ago

  Hi guys, this is my solution using React for the first time but i have 2 problems, in the mobile design, i try to add a element.classlist.toggle for show the mobile menu, but when i do this i have a error, and second, i cant move the background in the image, if any one can help me i really appreciate this, thankyou, happy coding!

  

  Project Tracking Main, first Mobile using React with Vite

  1

  1

  0

  

  Tee• 190

  @thulanigamtee

  Posted over 1 year ago

  To fix the functionality for the mobile menu, remove;

  const mobileContainer = document.querySelector(".mobileContainer")
      const [visible, setVisible] = useState(false)
      const mostrar = () =>{
          if(visible == false){
              mobileContainer.style.visibility = "visible"
              setVisible(visible = true)
          }else{
              mobileContainer.style.visibility = "hidden"
              setVisible(visible = false)
          }
      }
  

  I don't think you need that, replace it with this;

  const mostrar = () => {
      document.querySelector(".mobileContainer").classList.toggle("active");
    }
  

  Then on your css, I removed visibility, and used display:none, then toggled it, like this;

  .mobileContainer {
    display: none;
  }
  
  .mobileContainer.active {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    min-height: 40vh;
    width: 80%;
    margin-left: 10%;
    position: fixed;
    background-color: white;
    box-shadow: 0 0 20px -5px black;
    border-radius: 5px;
  }
  

  That seemed to do the trick, and I am not sure what mostrar is, when naming your functions or anything for that matter try using descriptive words, rather than mostrar, something like toggleMobileMenu for the function would have been way better, because that is what it does, it toggles the mobile menu.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Mtho• 140

  @MthoNtanzi

  Submitted over 1 year ago

  I just completed my first challenge... please let me know what you think

  

  QR-Code-Component

  3

  4

  0

  

  Tee• 190

  @thulanigamtee

  Posted over 1 year ago

  Congratulations on completing your first challenge.

  The text on the design comparison is centered rather than aligned to the left, try text-align: center, and it should fix that. When writing your HTML try to use landmarks, rather than using divs all the time.

  And I think it is better to have your css on a separate file from your html.

  0