2

When the website is initially loaded, the grid is squashed squashed grid

After resizing the webpage window it auto fixes the problem squared grid, but the grid extends over the webpage

After going into the css, the box-sizing is inherent. If I delete the box-sizing attribute, the grid is fixed.

The following is the css code for the grid.

#renderContainer {
    z-index: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

* {
    padding: 0;
    margin: 0;
}

*, ::before, ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;

The source code can be find on https://github.com/CIDARLAB/3DuF/blob/webpack-build/src/components/Visualiser.vue

The styling code can be find on https://github.com/CIDARLAB/3DuF/blob/webpack-build/public/modified.css

The html can be find on https://github.com/CIDARLAB/3DuF/blob/webpack-build/public/index2.html

Anyone know why this is happening?

Thank you!

jackruan
  • 29
  • 2
  • 1
    Please include some minimum code which we can run to see the problem for ourselves.As your question stands we'd just be guessing at solutions. – A Haworth Jul 13 '21 at 07:43

0 Answers0