KPC
Kevin Powell - Community•4mo ago
Sie

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!
No description
No description

globals.css

page.tsx

0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?