Could this inquiry receive positive feedback rather than being downvoted? I have conducted thorough research before posting.
I've been experimenting with developing a responsive website for practice. It worked well on my computer; every time I adjusted the size, it would resize proportionally. However, when I tried accessing it on my Samsung Galaxy S3 phone, nothing changed.
The technique involved setting a root font-size and making the code's font-sizes dependent on it. By establishing a container for the entire blog (with height set to 100%) and using percentages (%) for the child elements' heights and widths, along with implementing a media query for the phone screen dimensions.
Here is the output: image
What could potentially be causing this issue? Your constructive criticism and coding tips are welcome.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
font-size: 16px;
height: 100%;
}
.blog {
height: 100%;
}
/* Additional CSS Code Goes Here */
@media only screen and (max-width: 480px) {
html, body {
font-size: 12px;
height: 100%;
}<!-- HTML Snippet Goes Here -->