While developing the official website for my Discord bot - Idle Baker, I opted to utilize Bootstrap 5 for its user-friendly design features, making it easier than dealing with extensive CSS coding.
After completing the homepage of the site, I encountered an issue when testing the mobile view in browser-devtools. The scaling of elements and the navbar appeared extremely small in comparison to how they looked on PC and larger screen devices. Below you can find the code I used along with three images showing the discrepancy:
Normal PC Resolution https://i.sstatic.net/JFLS8.png
Abnormal Mobile Resolution https://i.sstatic.net/17r6k.png
Normal Mobile Resolution on external website https://i.sstatic.net/A4xkM.png
AOS.init();@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
.parallax {
background-image: url("./assets/bg_pic.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(3px);
}
... (CSS code continues)
...