I have just finished my first javascript project (a 3D website using three.js) but right before publishing I realized that I had not optimized the dimensions and contents to look the same when accessing the site other than a 1920x1080 browser. So I started looking at how to do that and discovered how to set DevicePixelRatio or use media queries with CSS. After googling and looking through stackoverflow I settled on using CSS media queries but I am running into 2 weird problems.
1) I am changing the size of my font depending on the resolution but as I am using Developer Tools to dynamically change the viewport(?) size in the browser. I click on "Toggle Device Toolbar" then select responsive and start scaling down to see my font size changes take effect.
They have been working as expected except for this, even though there are no gaps in resolution size for when to apply media queries, there are two points, specific dimensions of resolution or viewport (whatever F12 lets you change, i don't know what it's called), are excluded. For example...
I have media queries to take effect when the device width resolution is
between 600 to 699px apply font size change apply scaling of small image between 700 to 739px apply font size change apply scaling of small image between 740 to 767px apply font size change apply scaling of small image
on and on and on...
here is the code...
@media (min-width: 650px) and (max-width: 699px) {
* {
font-size:35%;
}
#icon {
width: 2.2em;
}
#tg {
width: 1.2em;
}
#join, #poo, #dex {
font-size: 800%;
}
}
@media (min-width: 700px) and (max-width: 739px) {
* {
font-size: 45%;
}
#icon {
width: 1.8em;
}
#tg {
width: 1.3em;
}
#join, #poo, #dex {
font-size: 600%;
}
}
@media (min-width: 740px) and (max-width: 767px) {
* {
font-size: 50%;
}
#icon {
width: 2.7em;
}
#tg {
width: 1.4em;
}
#join, #poo, #dex {
font-size: 500%;
}
}
@media (min-width: 768px) and (max-width: 833px) {
* {
font-size: 65%;
}
#icon {
width: 1.5em;
}
#tg {
width: 1.8em;
}
#join, #poo, #dex {
font-size: 400%;
}
}
@media (min-width: 834px) and (max-width: 899px) {
* {
font-size: 75%;
}
#icon {
width: 2.1em;
}
#tg {
width: 0.8em;
}
#join, #poo, #dex {
font-size: 300%;
}
}
@media (min-width: 900px) and (max-width: 1023px) {
* {
font-size: 80%;
}
#icon {
width: 1.9em;
}
#tg {
width: 0.8em;
}
#join, #poo, #dex {
font-size: 300%;
}
}
@media (min-width: 1024px) and (max-width: 1098px) {
* {
font-size: 90%;
}
#icon {
width: 1.8em;
}
#tg {
width: 0.9em;
}
#join, #poo, #dex {
font-size: 250%;
}
}
@media (min-width: 1099px) and (max-width: 1199px) {
* {
font-size: 95%;
}
#icon {
width: 1.7em;
}
#tg {
width: 1em;
}
}
@media (min-width: 1200px) and (max-width: 1280px) {
* {
font-size: 100%;
}
#icon {
width: 1.5em;
}
#tg {
width: 0.8em;
}
}
@media (min-width: 1281px) and (max-width: 1339px) {
* {
font-size: 100%;
}
#icon {
width: 1.6em;
}
#tg {
width: 0.8em;
}
}
@media (min-width: 1340px) and (max-width: 1399px) {
* {
font-size: 115%;
}
#icon {
width: 1.3em;
}
#tg {
width: 1.1em;
}
}
@media (min-width: 1400px) and (max-width: 1649px) {
* {
font-size: 125%;
}
#tg {
width: 1.1em;
}
}
@media (min-width: 1650px) and (max-width: 1919px) {
* {
font-size: 140%;
}
#tg {
width: 1.3em;
}
}
@media (min-width: 1920px) and (max-width: 2879px) {
* {
font-size: 150%;
}
#tg {
width: 1.5em;
}
}
@media (min-width: 2880px) and (max-width: 3839px) {
* {
font-size: 180%;
}
#icon {
width: 2.2em;
}
#tg {
width: 1.7em;
}
}
@media (min-width: 3840px) {
* {
font-size: 220%;
}
#icon {
width: 2.4em;
}
#tg {
width: 1.9em;
}
#comm {
font-size: 300%;
}
}
I chose those dimensions because I googled "list of display resolution of mobile devices" so that I can ensure that when I test my site viewed by those dimensions that it will still display as intended.
Like I said, the font size changes work smoothly as I size down the "viewable box in F12".... but if I put it on resolution width 767px exactly, it is as if the media query doesn't exist and my text goes to 100% which is of course way too big for the small display size.
I clicked on "More Options" in the "Device Toolbar" and selected "show media queries" which brings up some colored bars on the top of the toolbar showing where the media queries exists as you resize the display area. I can see at the top that there are two gaps where a media query is not existing and that is at 699px, 767px, 833px, 899px, and at 1023px. Even though those numbers are explicitly covered in my media queries (in the "max-width:" part), the media queries are not applying to those. I thought it was the syntax at first but other numbers that I included as the max-width: dimension don't revert back to 100% so I can't decipher anything consistent for me to understand what the issue is.
It looks in Mathematics when we use parenthesis instead of brackets to denote that we are not including a number in a solution set. Ya know, how [0,35) means from and including 0 to but not including 35. Except I don't think that is how CSS uses brackets and parenthesis. and I don't have any other media queries anywhere.
I tried using "!important" where I specified what size to change the font to, and then as I was writing this post I tried changing the number in the media query from 767px to 767.9999999px and that worked.... major eye roll
So are the numbers 699, 767, 833, 899, and 1023 just forbidden by CSS sarcasm from frustration or what? I don't understand.
Wait...... it's not something dumb like you can't use odd numbers in media queries or something like that, right? because it didn't say that anywhere that I could see and I googled different websites and referred to 3 different youtube videos on media queries.
problem 2) There are 4 total sections where text is shown on the screen. Most of the text consists of an image of a logo as a "bullet point" on each of 3 lines of text. As I go through the media queries and apply the font size change, the bullet point image also scales... but at a much faster rate so I had to INCREASE the size of the image to have it shrink SLOWER to be able to still be the same proportional size to the text as I check each of the media query sizes. So I went through each media query and compensated for the image correctly....but now, one of the lines of text (a
with an id; so I know I didn't also accidentally refer to it somewhere else) shrinks EVEN FASTER than the image.... Idk what the heck is going on. I made sure to use 16px as the font size in the HTML section in my CSS page and I used "em" units everywhere else. I am lost. I'll post the rest of my CSS code here.
* {
margin:0;
padding:0;
border: 0;
overflow: hidden;
}
canvas {
position: fixed;
width: 100%;
height:100%;
display:block;
top: 0;
left: 0;
}
html, body {
height: 100vh;
width:100%;
overflow: hidden;
margin: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color: rgb(255, 255, 255);
}
.slide1 {
position: absolute;
z-index:1;
top: 55%;
transform: translate(-50%, -50%);
left: 50%;
width: 100vw;
height:100vh;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.slide1 h2 {
position:absolute;
top:7%;
left: 18%;
font-size: 3em;
font-weight: bold;
display: inline-block;
}
.slide1 #p1 {
position: absolute;
top: 24%;
left: 18%;
font-size: 2.3em;
font-weight: bold;
}
.slide1 #p2 {
position: absolute;
top: 42%;
left: 18%;
margin: 0 auto;
display: inline-block;
font-size: 2.3em;
font-weight: bold;
/* text-align: left; */
}
.slide1 #p3 {
position: absolute;
top: 60%;
left: 18%;
margin: 0 auto;
display: inline-block;
font-size: 2.3em;
font-weight: bold;
}
.slide2 {
position: absolute;
z-index:1;
/* transform: translate(0, -50%); */
width: 100vw;
height: 100vh;
clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
}
.slide2 h2 {
position: absolute;
top: 12%;
left: 27.5%;
font-size: 3em;
font-weight: bold;
}
#contract {
position: absolute;
top: 30%;
left:13%;
font-size: 2.1em;
font-weight: bold;
display: inline-block;
}
#clip {
width:1em;
}
#icon {
width:1.3em;
vertical-align:middle;
}
#erc {
position: absolute;
top: 48%;
left:13%;
font-size: 2.1em;
font-weight: bold;
}
#buy {
position: absolute;
top: 66%;
left:13%;
font-size: 2.1em;
font-weight: bold;
}
#contracts {
display: none;
position:absolute;
top:auto;
width: 1px;
height: 1px;
overflow:hidden;
}
.slide3 {
position: absolute;
z-index:1;
width: 100vw;
height: 100vh;
clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%);
}
.slide3 h3 {
position: absolute;
top: 18.5%;
left: 42%;
font-size: 3em;
font-weight: bolder;
text-align: center;
}
#info {
position:absolute;
top: 35%;
left:31%;
margin: 0 auto;
font-size: 2.3em;
font-weight: bold;
}
#poo {
position:absolute;
top: 50%;
left:21%;
margin: 0 auto;
font-size: 2.3em;
font-weight: bold;
}
#dex {
position:absolute;
top: 70%;
left:21%;
margin: 0 auto;
font-size: 2.3em;
font-weight: bold;
}
.slide4 {
position: absolute;
z-index:1;
top: 35%;
transform: translate(0, -50%);
text-align: center;
width: 100vw;
height:100vh;
clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
}
.slide4 h4 {
position:absolute;
top:30%;
left:38%;
font-size: 3em;
font-weight: bolder;
}
#comm {
position: absolute;
top: 52%;
left: 28%;
font-size: 2.3em;
font-weight: bold;
}
#join {
position: absolute;
top:70%;
left: 30%;
font-size: 2.3em;
font-weight: bold;
}
#tg {
width:1.1em;
}
I have no styling in my HTML code so there shouldn't be any conflicting font size or image size from HTML.
Can someone help me make sense of this please? Thank you!
the spec says that viewport width can potentially be calculated as a fractional value due to zooming, hidpi, etc. since your media queries specify bounded ranges, and there are holes in between those ranges, it's possible for certain viewports to not match any media queries at all.
since you're using the same set of selectors and rules inside of each media query, you don't need max-width at all; just use min-width and let the CSS engine do the rest.