How to fix browser issue in wordpress theme development - css

Question

I am learning to develop wordpress theme and I found some strange and irritating problem.
on the desktop, everything is fine but when I opened it from mobile phone It gives different look.
I am attaching two screenshots of google chrome and Firefox output.
Where Firefox is giving decent look but google chrome is giving text bigger and does not sound good.
How can I fix the coding so that both could look same.
HERE IS THE CODE OF CSS
.home-2-article {
display: flex;
background-color: white;
box-shadow: 0 0 8px rgba($font-color, .5);
margin-bottom: 20px;
#media only screen and (max-device-width: 599px) {
display: flex;
flex-direction: column;
margin-bottom: 3rem;
}
& > * {
padding: .3rem;
}
&__thumbnail {
flex: 0 0 35%;
margin-right: 1rem;
#media only screen and (max-device-width: 599px) {
margin: 0;
}
img {
width: 100%;
height: auto;
}
}
&__wrapper {
&__title {
h2 {
font-size: 1.5em;
#media only screen and (max-device-width: 599px) {
font-size: 3em;
text-align: center;
}
}
}
&__meta {
display: flex;
#media only screen and (max-device-width: 599px) {
font-size: 1.7em;
justify-items: center;
justify-content: center
}
;
& > * {
padding: 0.5rem;
}
}
&__excerpt {
padding-bottom: .5rem;
p {
font-size: 1em;
#media only screen and (max-device-width: 599px) {
font-size: 2em;
padding: 0.3rem;
}
}
}
.home-2-article__rm {
a {
background-color: $primary-color-dark;
padding: 0.2rem .6rem;
color: white;
#media only screen and (max-device-width: 599px) and (max-width: 599px) {
font-size: 1.7em;
text-align: center;
display: block;
}
&:hover {
background-color: $primary-color;
transition: 1s all ease-in-out;
}
}
}
}
}