Fluid Typography—Different text sizes when setting div width

Question

I am trying to utilize fluid typography and so far it's been going good but I am having an issue with one of my breakpoints. When I test on iphone 11 (landscape mode), text in divs that are set to greater than 50% of the viewport expand the "p" text within that div and also any "p" text outside the div. It is like it sets a new minimum/maximum. I am trying to have a set p size, no matter the width of the div. Any help appreciated!

Here is an example page that demonstrates this issue: https://sandbox.kikawebdesign.com/sample-page/

Screenshot of example page

Update 08/22/2022: I apologize for not putting in all the information here originally. I thought it would be easier to read the text on the provided URL. But here is what my testing hows shown:

After testing, it seems that anytime I set div width larger than 50 (%, vw, rem, em, etc), the “p” text size for that div increases greatly. In addition, it increases any/all “p” text size that is not within a set div width. My goal is to have the “p” text inside a div to be the same size as the regular “p” text regardless of the width of the div.

Desktop, iPad (both portrait and landscape), and iPhone (portrait) display fine but on the iPhone (landscape), I am getting this issue (tested in both Safari and Edge browsers). For testing purposes, I have an iPhone 11.

Here is the code

    html {
font-size:1.25vw;
margin:0!important;
padding:0!important;
}
body {
font-size: calc(14px + (18 - 14) * ((100vw - 768px) / (1920 - 768)));
color:var(--text);
font-family:var(--bodyfont);
margin:0;
padding:0;
}
#divtest {
float:left;
width:100vw;
padding:0;
margin:0;
}
.testing1 {
width: 45vw;
float: left;
}
.testing2 {
width: 50vw;
float: left;
margin-left:5vw;
}
#divtest2 {
float:left;
width:100vw;
padding:0;
margin:0;
}
.testing3 {
width: 40vw;
float: left;
}
.testing4 {
width: 55vw;
float: left;
margin-left:5vw;
}

Please put code direct into your question as a runnable snippet. — A Haworth, Aug 02 '22 at 06:16

score 1 · Answer 1 · answered Aug 02 '22 at 19:45

It took almost two days of research but I found this answer from an older thread, tested it, and it seems to be working.

The solution: I added the code below with a media query that targeted screens under the iPad portrait mode and above the iPhone portrait mode.

 @media(max-width: 767px) and (min-width:667px){
     html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
    /*  html, body, div, p {
         font-size:14px!important;
     }*/
}

I wanted to post in case anyone else had this issue.

Fluid Typography—Different text sizes when setting div width

1 Answers1