search

lactf / lactf-website

LA CTF hosted by ACM Cyber & Psi Beta Rho! Website for the largest annual cybersecurity competition at UCLA! Whether you are tackling your first exploit or have professional experience, there will be challenges just right for you!
https://lac.tf/
10 stars 4 forks source link

Fix countdown mobile #35

Closed burturt closed 1 year ago

burturt commented 1 year ago

Closes #27 Updates countdown timer to use flexbox.

Screenshots (I removed the lower sections below about for these pictures since they still need to be fixed): ![Screen Shot 2022-10-25 at 11 28 18 PM](https://user-images.githubusercontent.com/31748545/197951430-1c12ddc8-d5b8-44b5-a998-5c39863d969c.png) ![Screen Shot 2022-10-25 at 11 28 22 PM](https://user-images.githubusercontent.com/31748545/197951459-07d7f7b1-f7a8-4196-9b30-6118fcf72b44.png) ![Screen Shot 2022-10-25 at 11 28 28 PM](https://user-images.githubusercontent.com/31748545/197951469-659fdd25-361b-46cb-a252-735f80653a38.png) PNG image
burturt commented 1 year ago

Do you mean like where the title/banner/time/countdown is placed in relation to each other on the landing screen?

bliutech commented 1 year ago

@burturt I think the size of the buttons is too small. It should be roughly the same size and thus the margin should be reduce with media queries on reduced page width.

burturt commented 1 year ago

https://user-images.githubusercontent.com/31748545/197959690-990356ac-196b-4e4a-b690-58ab2432b7dd.mp4

this is what I have now - any feedback?

bliutech commented 1 year ago

@burturt Does that follow the media query sizes for standard screens? If yes, then we are good. If you check the Chrome developer tools, there is a tool that shows the specific screen sizes for all standard devices that we need to account for.

burturt commented 1 year ago

The media queries I attached to the page occur at 1024px and 600px.