0

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%);
}

This is narrow for some reason This is wider

Olajide Olaolorun
  • 143
  • 8
  • 1
    I think the problem is the email address, which prevents a new line. You should modify the way you handle `white-space`. – Benchy Jan 18 '22 at 23:36
  • 2
    @Benchy I have the same thought as you, the email in the `a` tag will not automatically return a line, so we need to handle word breaks for the `a` tag. I tried using `word-wrap: break-all;` and it works. – Mike Le Jan 19 '22 at 00:24
  • add these property to `a` tag . `word-wrap: anywhere;` for firefox and `word-wrap: break-word; or word-wrap: break-all; ` for chrome, – Ahmad MRF Jan 19 '22 at 01:35
  • But i want it to look wide just as the email one. As opposed to the narrow version up top. @M.RMRF – Olajide Olaolorun Jan 19 '22 at 03:22
  • look this answer , i hope help you. https://stackoverflow.com/a/23777535/10749726 – Ahmad MRF Jan 19 '22 at 05:27

1 Answers1

0

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;
}
David Salomon
  • 804
  • 1
  • 7
  • 24