Responsive Project tracking intro component using HTML, CSS & JS

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted 9 months ago

  Hey Rebecca, the reason you can't scroll past is not because of the transform on the image but instead, it's the overflow: hidden; on the body.

  The min-height: 100vh on the body sets the height of the body element to be equal to the viewport height, so it fills the entire screen, and overflow: hidden will hide any content that overflows the boundaries of the body element and in this case its all the content which is coming after the image so you just see the image and can't scroll.

  If you remove the overflow from the body then it's just a partial fix, as that will only make that horizontal scroll bar reappear (which you might be trying to hide initially haha)

  Fix:

  1. Remove the overflow: hidden from the body first.
  2. Now there are 2 possible things you can do:

  • Simply add the overflow: hidden to your section tag. (This project doesn't have any other content that can be clipped by the overflow so it's okay for this specific project)
  • The 2nd approach which I feel is good in the longer run is to encapsulate the img in its own div and then apply the overflow: hidden to this div. (you have to move the styles from section > img to the img tho) like this:

  //the Image container div
  div {
    overflow: hidden;                    
  }
  
  img {                       // give it a class name if you want to 
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(10%) scale(1.1);
      padding-block: 2rem;
  }
  

  This usually will save you the trouble for any future changes in the styles of other things inside the section.

  and that's it!

  You can go with either solution you like! I just wanted to state that there are multiple ways to solve this problem 😊

  Tip: Try to use the browser dev tools whenever you get stuck styling something and inspect the elements to find the culprit that is causing the issue.

  Hope this helps and happy coding! 🥳

  Marked as helpful

  1
• 

  P

  Alper•1,010

  @adonmez04Posted 9 months ago

  Hi, I couldn't scroll your page using Brave and Firefox on the desktop. I think there's a global problem with your code.

  0