Search code examples
htmlcsscss-grid

Problem with grid layout. Blocks falls out from their inherit block

I have one problem with one of my pages. A few blocks falls out from their inherit block, and I can't find a problem with it.

If you help me i will much appreciate it.

Here is the link on page - https://nickolasdzr.github.io/grid-layout/ and after go into the page just resize it on 320px, and see on 'portfolio-section.

Solution

  • So the problem is that the .portfolio-section tries to use all available space including the padding if it gets smaller. What you want you to do is, at the respective adjust your css like so:

    @media (max-width: 480px) {
  .portfolio-section {
    grid-template-columns: minmax(100%, 1fr);
  }
}

    This assures that it will take 1fr at max but only 100% of its available space in width and prevent horizontal overflow.

    If you want to read further on this, there is an Article on Smashing Magazine where it is explained in more detail.