I have a very weird thing and have no idea what could be causing it. Everything is fine on my PC but on my phone (Samsung) few, seemingly random paragraphs in the same div have a larger font size then others.
Anybody has a clue what could be causing that?
Tested on Firefox, Chrome and chromes views for portable devices. It looks fine there.
I deleted browsing data on my phone multiple times so it’s not stuff left behind from previous “versions”
There is no other formatting for <p> tags anywhere else in my styling nor in html file.
p {
font-family: "Crimson Text", "serif";
text-align: center;
font-size: 4vw;
color: rgba(0, 0, 0, 0.8);
text-shadow: rgba(161, 231, 161, 0.5) 0 0 1px;
}
@media screen and (min-width: 800px) {
p {
font-size: 2vw;
}
}
@media screen and (min-width: 1400px) {
p {
font-size: 1vw;
}
}Below: The long paragraph starting with "Listed" has a noticeably larger font on my phone then the other paragraphs.
<p>-A WALK TO THE SEA SIDE-</p>
<p>Listed as the number one beach resort in Poland, situated at the Baltic Coast: Welcome to Sopot! We would love to bring our guests to where we had one of our first dates in Poland; Located just a 10 minute walk away from Hotel Rezydent, the Sopot Pier.</p>
<p>11:00 Meet-up at <a href="#hotel"> Hotel Rezydent</a></p>
<p>11:20-12:20 Strolling by the Pier</p>
<p>Attire: Casual</p>2
added:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″
to the head of the page and it seems to help.
Further info here:
Generated HTML font size differs from original