I'm struggling with a puzzling issue while developing a Wordpress theme. When I zoom in to 250% on mobile, all the header text stays the same size on every page except for one. On that particular page, the text appears significantly larger, almost as if it's already being magnified. Any suggestions?
Here is the code snippet I've used to zoom in on mobile:
.site-header h5 {
font-size: 250%;
letter-spacing: 2px;
color: #3b3a36;
font-family: 'Russo One', sans-serif;
margin: 0;}
Additionally, here are the div elements I'm utilizing on the problem page:
.about-header {
width: 100%;}
.about {
display: flex;
width: 100%;
flex-flow: column wrap;}
.about1 {
width: 98%;
box-shadow: inset 0 0 8px 2px rgba(0,0,0,.75);
padding: 10px;
margin-bottom: 10px;}
.about2 {
width: 98%;
box-shadow: inset 0 0 8px 2px rgba(0,0,0,.75);
padding: 10px;
}
.about div:nth-of-type(1n+2) {
margin-left: 0px;
padding-bottom: 20px;
flex: 1;}
The website where I'm testing my theme can be found at . The specific page displaying the larger font size in the header is accessed through .
This discrepancy only occurs on mobile, hinting that there might be something related to the 250% text zoom causing the anomaly. Your input would be greatly appreciated. Thank you!