DJR Comments - Answer Overflow

Hi @zed7, The physical size of the display isn't what controls how things look on a webpage. You need to obtain the viewport width for this purpose. You can have a 14" laptop with a 1920 x 1080 resolution and a 24" monitor with the same resolution. Your webpage will look the same on both. At the top of the screen you can see two numbers: 1024 and 814. This is the viewport in pixels, with the first number being width and the second being height. You will mostly be wanting the width, but there are instances where knowing the height can be important. 1366 x 768 is a very common laptop resolution, as is 1920 x 1080. You can edit the two numbers with these values to see how your design will appear at those resolutions (or any other). Also be sure to set the zoom level to 100%. CSS media queries are used to control the appearance of a webpage based on a viewport width/height. Simply put your CSS inside a media query like this (the indentation is just for legibility):

body {
    background: blue;
}
@media screen and (min-width: 1920px) {
    body {
        background: green;
    }
}

body {
    background: blue;
}
@media screen and (min-width: 1920px) {
    body {
        background: green;
    }
}

For any viewport with a pixel width up to 1,919 pixels, the background color of the webpage will be blue. At 1,920 pixels, it becomes green.

2 replies

KPCKevin Powell - Community

•Created by Ezsean on 7/13/2023 in #front-end

Grid Questions

1) I'm assuming you're referring to Bootstrap. The number 12 was chosen because it has the most amount of multiples compared with any other number around it. It's not strictly necessary, and it might not even fit your layout if the design is incompatible. 2) With grid-template-columns, you should ideally use fr or %. If you want a specified number of equal-width columns, you can also use repeat(n, 1fr), where n is the number of columns and 1fr is their equal width. On a side note, fr and % are somewhat relatable units as they both work as fractions of a whole number. For example, for a 60/40 layout, you can do 60% 40% or 3fr 2fr. Also, if you're going to use grid-gap, you will want to use fr to deal with the overflow.

2 replies

KPCKevin Powell - Community

•Created by keyohh on 7/10/2023 in #front-end

Trying to understand how i could have known this

arr.push() works because you're associating the first parameter arr with an array when you run the function with testArr used as the substitute for the first parameter.

6 replies

KPCKevin Powell - Community

•Created by keyohh on 7/10/2023 in #front-end

Trying to understand how i could have known this

is there any way i could have known “arr” was linked to “testArr”?

The function accepts (and expects) two arguments, arr and item. When you call the function, you include both of these arguments. As the first argument given is the array testArr, that will be used to substitute for arr. 6 is substituted for item.

6 replies

KPCKevin Powell - Community