Catz
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
here's the working version: https://codepen.io/oiwdjawoidoijd/pen/gOEBKOG
14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
thank you so much for your time, i'm so sorry this was really overcomplicated. again i really appreciate your help 😄
14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
oh or even simpler is viewport units
14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
i think i found a solution! by turning the element containing both the logo and the progress bar into a container with
container-type: inline-size;, we can base both of their widths using the container query units. i dug into the source code of minecraft to get the exact measurements and it says the widths needs to be min(75cqw, 100cqh), while the logo is centered on the screen, and the progress bar is 83.25% from the top14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
also sorry for the messy code haha, it's just me trying things in the same file for hours
14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
this is the best result i've gotten so far https://codepen.io/oiwdjawoidoijd/pen/GReYdRJ. the image resizes itself, and the progress bar isn't pushed off screen. the only problem is that i can't match the width of the logo and the progress bar
14 replies