# Responsiveness Logic(Million Dollar Homepage)

## Grid Distribution

### 3 main sizes to occupy largest area for a given screen

- For desktops(17 columns, 7 rows)
- For Tablets(13 columns, 9 rows)
- For Mobiles(9 columns, 13 rows)

To occupy maximum area with the 3 given sizes, we would like to use these aspect ratio till each breakpoint.

### **Explanation**

9/13(Mobiles) = 0.69
13/9(Tablets) = 1.444
17/7(Desktops) = 2.428
Note : Normal Desktops are normally 16:9(1.777 aspect ratio) so we dont have to think about 2.428+ aspect ratio screens.

Now, we find the middle point between these ratios.
For e.g.,

The middle point between 1.44 and 2.428 is 1.9365. Therefore whichever screen is between 1.9365 and 2.428 should have 17 columns 7 rows so as to occupy maximum area and screen below 1.9365 should have 13 columns and 9 rows.
Extending this to the other break point:

Therefore,
- 1.9365< **screen size** < 2.428+ should have 17 columns and 7 rows.
- 1.0683 < **screen size** < 1.9365 should have 13 columns and 9 rows.
- 0.00 < **screen size** < 1.0683 should have 9 rows and 13 columns.
These are the values so that we can attain maximum area.

## Size of each NFT

Now to calculate the size of each NFT:

We take us of css view width(vw) and calculate the size relative to the width of the screen.
So, for example any screen between 1.0683 and 1.9365.
We check what is the min. width value in vw can be given to the NFT and it is calculated at 1.9365. We find 5vw is suitable for that ratio.
Now as we decrease width, size of NFT would also decrease along with the aspect ratio.
So, to increase the NFT Size, we write the code below:

Here, while the width of screen is greater than the size occupied by the NFTs(13, here 15 is taken considering grid gap) and height is greater than height occupied by NFTs, we increase the NFTSize by 0.2vw.

The same concept is used in the other two aspect ratios as well.