Portfolio website ratio and zooming problems.

Hello, I'm trying to make the background of my portfolio. But I realized that the page only maintains the correct ratio at 75% zoom in the page.

On the other hand, when zooming the website less than 75%, it starts to scale to the top left corner instead of the top middle, which is what I want. I'm a beginner at HTML/CSS, so I may have chosen the wrong unit at the start and actually have no idea about the ratio properties. Here are the page.tsx and the global.css.

There are also other components, but I think they are not related to the problem here. There are still more problems with the pattern and navigation bar when scaling, but I think tackling it step by step is much easier.

The problem may have occurred due to this part of the css file:

.desktop {
  position: relative;
  width: 100%;

  height: 100%;

  
  /* your 60px grid */
  background: var(--dark-cream);
  background-image:
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;

  /* Calculate responsive units */
  --unit-vw: calc(100vw / var(--design-w));
  --unit-vh: calc(100vh / var(--design-h));
}
.pattern-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  filter: drop-shadow(var(--shadow));
}
...
@media (min-width: 1200px) {
  .desktop { 
    max-width: 2225px; 
    margin: 0 auto; 
  }
}
@media (min-width: 1800px) {
  .pattern, .plus, .triangle { transform-origin: center; }
}
@media (max-width: 1200px) {
  .window { width:90%; max-width:871px; height:auto; aspect-ratio:871/656; }
  .app-grid { gap:20px; padding:20px 30px; }
  .pattern, .plus, .triangle { transform: scale(.8); }
}

.desktop {
  position: relative;
  width: 100%;

  height: 100%;

  
  /* your 60px grid */
  background: var(--dark-cream);
  background-image:
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;

  /* Calculate responsive units */
  --unit-vw: calc(100vw / var(--design-w));
  --unit-vh: calc(100vh / var(--design-h));
}
.pattern-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  filter: drop-shadow(var(--shadow));
}
...
@media (min-width: 1200px) {
  .desktop { 
    max-width: 2225px; 
    margin: 0 auto; 
  }
}
@media (min-width: 1800px) {
  .pattern, .plus, .triangle { transform-origin: center; }
}
@media (max-width: 1200px) {
  .window { width:90%; max-width:871px; height:auto; aspect-ratio:871/656; }
  .app-grid { gap:20px; padding:20px 30px; }
  .pattern, .plus, .triangle { transform: scale(.8); }
}

Thank you for helping. I would really appreciate it!

globals.css11.44KB

page.tsx3.42KB

KP-C

Kevin Powell - Community•10mo ago

Sie

Portfolio website ratio and zooming problems.

.desktop {
  position: relative;
  width: 100%;

  height: 100%;

  
  /* your 60px grid */
  background: var(--dark-cream);
  background-image:
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;

  /* Calculate responsive units */
  --unit-vw: calc(100vw / var(--design-w));
  --unit-vh: calc(100vh / var(--design-h));
}
.pattern-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  filter: drop-shadow(var(--shadow));
}
...
@media (min-width: 1200px) {
  .desktop { 
    max-width: 2225px; 
    margin: 0 auto; 
  }
}
@media (min-width: 1800px) {
  .pattern, .plus, .triangle { transform-origin: center; }
}
@media (max-width: 1200px) {
  .window { width:90%; max-width:871px; height:auto; aspect-ratio:871/656; }
  .app-grid { gap:20px; padding:20px 30px; }
  .pattern, .plus, .triangle { transform: scale(.8); }
}

.desktop {
  position: relative;
  width: 100%;

  height: 100%;

  
  /* your 60px grid */
  background: var(--dark-cream);
  background-image:
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;

  /* Calculate responsive units */
  --unit-vw: calc(100vw / var(--design-w));
  --unit-vh: calc(100vh / var(--design-h));
}
.pattern-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  filter: drop-shadow(var(--shadow));
}
...
@media (min-width: 1200px) {
  .desktop { 
    max-width: 2225px; 
    margin: 0 auto; 
  }
}
@media (min-width: 1800px) {
  .pattern, .plus, .triangle { transform-origin: center; }
}
@media (max-width: 1200px) {
  .window { width:90%; max-width:871px; height:auto; aspect-ratio:871/656; }
  .app-grid { gap:20px; padding:20px 30px; }
  .pattern, .plus, .triangle { transform: scale(.8); }
}

Thank you for helping. I would really appreciate it!

globals.css11.44KB

page.tsx3.42KB

Portfolio website ratio and zooming problems.

Portfolio website ratio and zooming problems.

Similar Threads

Similar Threads

Similar Threads