移动响应上的 CSS 宽度问题

Question

Wondering why the 2 pages, About and Contact have different width when it comes to the text.

They are both using the same style but one is narrow and one is wider. Mainly noticed this on the mobile version especially and its driving me crazy.

https://genesisventuresinvestments.com/about.html

https://genesisventuresinvestments.com/contact.html

.dummy-dummy-text{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  padding: 0 20px;
  transform: translate(-50%, -50%);
}

Answer 1

I used word-break: break-word and works fine, however I'd recommend using clamp() to edit the font size as a best practice, here are some suggestions

h1 {
font-size: clamp(1.913rem, calc( 12px + 2.475vw ), 2.587rem);
line-height: 1.1;
}


h2 {
font-size: clamp(1.575rem, calc( 12px + 1.800vw ), 2.025rem);
line-height: 1.1;
}


h3 {
font-size: clamp(1.282rem, calc( 12px + 1.350vw ), 1.688rem);
line-height: 1.1;
}


h4 {
font-size: clamp(1.125rem, calc( 12px + 0.900vw ), 1.350rem);
line-height: 1.1;
}


p {
font-size: clamp(1.035rem, calc( 12px + 0.540vw ), 1.125rem);
line-height: 1.1;
}


span {
font-size: clamp(0.900rem, calc( 12px + 0.360vw ), 1.012rem);
line-height: 1.1;
}