EthanThatOneKid
Blog post preview component
Deploy Preview for acmcsuf ready!
| Name | Link |
|---|---|
| Latest commit | e183902d1f16f3801ac77ab89e9e9b62967a8986 |
| Latest deploy log | https://app.netlify.com/sites/acmcsuf/deploys/67e0f9145bd1190008da1faf |
| Deploy Preview | https://deploy-preview-935--acmcsuf.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Refactor layout: rearranged events into 3-column grid, added hover effect & shadow to cards
Hi @isliese . It looks amazing! It seems to be responsive across all devices. Just a small note, we could change how many posts show per row on Tablet view. As seen below, it's not formatted as cleanly. We could display one post per row for mobile and tablet view. For example:
- Display 1 post per row for screen sizes that are less than 850px
- Display 2 posts per row for screen sizes that are between 851px and 1280px
- Display 3 posts per row for screen sizes that are greater than 1280px
Feel free to test and see how to adjust based on screen size. Ultimately, we want to avoid having the posts appear long because there's a lot to display on the front or because there's not enough width to display the information cleanly.
Pictures below show the difference I'm talking about. If posts appear as in the first picture, I suggest displaying less posts per row so the post can have a bigger width.
The previous version adjusted the number of posts per row dynamically based on screen size, reducing the number of posts per row as the screen width decreased. However, this approach did not account for device characteristics properly.
In this version, I have implemented the following layout adjustments: • Display 1 post per row for screen sizes less than 850px • Display 2 posts per row for screen sizes between 851px and 1280px • Display 3 posts per row for screen sizes greater than 1280px
Additionally, while addressing this issue, I also resolved problems such as posts being cut off on certain screen sizes.
Results:
Below is the image for iPhone 14 Pro Max:
Below is the image for iPad Pro:
Below is the image for MacBook Pro: