Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
My problem comes in two parts, which seem to heavily rely on each other. The first is the vertical alignment problem. My page has a logo and a progress bar below it like so:
I need the spacing between these elements on the vertical axis to be the following:
1.
37.6% of the <section>'s height between the <img> and the top of the <section>
2. 20% of the <section>'s height between the <img> and the progress bar <div>
3. 14.7% of the <section>'s height between the progress bar <div> and the bottom of the <section>
I've tried using margins, top/bottom, flexbox, and grid. The best results I've gotten thus was by using flexbox, by inserting invisible elements where spacing is needed, and then giving them flex-shrink: 0;.
Anyways, not all solutions for this work, because I need the logo to keep its aspect ratio. When the page is squished vertically, I expect the logo to shrink, so the spacing maintains the correct values. I've achieved this using object-fit: contain;. Problem with this solution, is that I need the progress bar's width to match that of the svg. object-fit: contain; makes it so that the width of the <img> element doesn't necessarily match that of the svg inside of it. So I really don't know how to even extract the width of the svg 😦
The last thing that I need is for the progress bar's height to be a constant value, like 10px. The widths of both the logo and the progress bar are currently set to width: min(1080px, 74.5%);
Thank anyone in advance for trying to help 😄 ❤️ I've been stuck on this for a while
10 Replies
Is this what you're trying to achieve?
https://codepen.io/erikblomqvist/pen/RwdeMvX
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
also sorry for the messy code haha, it's just me trying things in the same file for hours
So something like this?
https://codepen.io/erikblomqvist/pen/LYagmqp
I did a bit of a cleanup just to keep my brain sane. 😅
One issue is that you have
height: 100%/object-fit: contain on the image, which allows the image calculation to be based on the height, rather than the width. As long as you have that, it's never going to work on all viewports.Yeah 😦 that's one of the requirements, because if the window isn't tall enough it looks like this
i managed to find a silly js fix https://codepen.io/oiwdjawoidoijd/pen/gOEBKOG
if there's no css solution that's fine as well 😄 your cleaned up version is very pretty and makes up for the ugly js lol
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 top
oh or even simpler is viewport units
thank you so much for your time, i'm so sorry this was really overcomplicated. again i really appreciate your help 😄Just popping in to say thanks for asking it, as this is the kind of problem I face all the time.
Thank goodness for container units though.
here's the working version: https://codepen.io/oiwdjawoidoijd/pen/gOEBKOG
Glad you found a solution, Catz!