Lightweight solution
Check demo here: http://jaha1.mbnet.fi/demo/ - Images are always perfect squares - Will change between 3x4 and 4x3 layout depending on screen size - Labels are their own HTML element, so they are easy to modfy - 50px banner is at the bottom - Very lightwight, does not use any CSS/JS frameworks - Uses JS only to change images based on screen size (optional)
กระดานประกาศ
-
ผู้จัดการประกวด - 5 ปี ที่ผ่านมา
Hi, this is a good submission. However, it appears that you are hardcoding when it changes from 3x4 to 4x3 to 400px. The requirement is that width>height is the determining factor
- 5 ปี ที่ผ่านมา
-
JaHa1
- 5 ปี ที่ผ่านมา
Hi, thansks. However, I don't agree with the hardcoding part. Please check the lines 47-51 in http://jaha1.mbnet.fi/demo/styles.css . That @media rule starts with "orientation: portrait". As per CSS specification, it is true when height > width. However, there's a problem with that: What if user's screen size is 300x280, for example? Then width is larger than height so it still uses 4-per-row layout and because the screen is so small there's not enough space for the texts. That's why I added the secondary condition that switches to 3-per-row layout whan user's screen is smaller than 400px wide.
- 5 ปี ที่ผ่านมา
