All comments

• 

  Atla Sai Tarun Reddy•10

  @SAI-TARUN-REDDY-ATLASubmitted almost 2 years ago

  This is my first work on frontend as a newbie, if anyone find any error or any method to code which is better than this then you could share your approach to this.

  

  Product preview card using css and html for desktop and mobile

  1

  10
  

  Obiora Emmanuel•350

  @Emmanuel-obioraPosted almost 2 years ago

  Good day. From your completed project I observed that your attribution class content is sitting close to the main content of the web also you have an accessibility issue to correct. To fix this kindly do the following;

  1. Change the 'div' with the class attribution to 'footer'
  2. Add the following code to the body landmark of your web page.

  body{
        display: grid;
        min-height: 100vh;
  }
  

  3. Add the following to the footer tag or the class attribution.

  .attribution{
        margin-top: auto;
  }
  

  I hope this is helpful. Happy coding!!!

  0
• 

  Raphael Nnadi•300

  @raphaelnnadiSubmitted almost 2 years ago

  I cannot seem to get my nav-toggle to work. Please help me

  

  news homepage

  1

  10
  

  Obiora Emmanuel•350

  @Emmanuel-obioraPosted almost 2 years ago

  Good day. For your toggle button you can create a function that reveals or hides the navigation using pre-defined CSS property. First you will need to change the flow of your nav menu to vertical and adjust it to the right using CSS. second set the display of the nav className to

  nav{
  display: none;
  }
  

  then create a class element within your style sheet, i.e

  .reveal-nav{
  display: flex; **depending on what you used**
  }
  

  Once the above is completed, you will move over to JavaScript. you can use the code as follow.

  const Navigation = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  
  show.classList.add('reveal-nav');
  }
  

  Then to hide the nav bar you use the reversal of what was written above

  const HideNav = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  
  show.classList.remove('reveal-nav');
  }
  

  Finally add the onClick={HideNav} as the case maybe to the elements performing the functions. once the above is implemented your code should be working fine. But you will also need to create a background modal. add a div tag to your code and give it an id, then add the following CSS properties

  .modal{
  display: block;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  }
  

  However, you will need to call up the modal when showing and hiding the navigation bar. Just add the following to the functions above.

  const Navigation = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  const modal = document.getElementById('add-modal-id-here');
  
  show.classList.add('reveal-nav');
  modal.classList.add('modal');
  }
  

  And on close add the new lines.

  const HideNav = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  const modal = document.getElementById('add-modal-id-here');
  
  show.classList.remove('reveal-nav');
  modal.classList.remove('modal');
  }
  

  This is a basic JavaScript function, I hope this helps in resolving your bug

  0