Adventure Ten Bar 2 padding values calculation

[zacks_adm]

Hello,

This is maybe a bit unusual request, but can you please explain to me the “math” behind padding values for Bar 2 in the Adventure Ten header template, which can be found in Design Cloud? Following are the “facts” that I think I understand:

• Background image size is 1440 by 650 pixels (not sure if relevant for padding calculation)
• Bar 2 Font Size is 16px, and Breaking Point is set to 1200px, which I think are the base values for em, rem, vh, vw and % calculation

Bar 2 padding values for top and bottom are the following:

• Top: calc(8rem + 5vw + 35px)
• Bttm: calc(5vw + 45px)

Now, if I understand the base values correctly, related to the Top padding, 8rem is the size of Bar 1, and this is the only value I understand. The rest of the math is totally unclear to me. Also, according to base values, when translated to pixels, the math would be the following:

• Top: 8x16 + 1200x0.05 + 35 = 223px
• Bttm: 1200x0.05 + 45px = 105px

Can you please explain me the “logic” behind the padding calculation? Thank you very much.

[ruenel]

Hello Zack,

Thanks for writing in!

The height of the Bar 1 element is 8rem. The height of the Bar 2 element is simply auto.

While the position of the Bar 1 element is absolute, the position of the Bar 2 element is just relative. With these settings, you need to add the height of Bar 1 element to the Top padding of the Bar 2 element so that you’ll have enough space to display the Bar 1 and the contents of the Bar 2 element.

You still have a consistent 105 pixels of top and bottom padding for the Bar 2 element while also displaying the Bar 1 element in an absolute position over the Bar 2 element.

Hope this helps.

[zacks_adm]

Hello @ruenel

Thank you for your explanation. Ok, I understand the logic around Bar1 height (8rem) and that I have to calculate that value when defining padding for Bar2. What I still don’t understand is how did you calculate an additional consistent 105px of top and bottom padding.

I would like to do the same for one header I am working on, where my Bar1 has a height of 11.25rem, and I have a background picture whose size is 1440x960px, and I just cannot calculate padding so that it works as Adventure Ten header. If you would be so kind as to give a bit more details, I’d much appreciate it. Thank you very much.

[christian]

Hey Zack,

I’m not sure what you and Ruenel are discussing about consistency because when viewing the Top and Bottom Paddings of the Adventure Ten Bar demo, it’s not consistent because of the 5vw part. To understand what I’m going to say, please learn what the VW unit does here: https://www.w3schools.com/cssref/css_units.asp

Now that you know what the VW unit does, you’ll know that it changes based on the viewport’s width. For example, viewing the 5vw on a monitor with 1000px X or Horizontal resolution, 5vw or 5% of 1000 is 50px. In a monitor with 1920px X Resolution, 5vw is 96px.

As you decrease the viewport size like in phones, 5vw would be very small and that’s where 35px (TOP) and 45px (BOTTOM) in the calc comes in. That acts like a “minimum” distance between the headline and the bar 1.

The purpose of the VW unit is to help maintain the distance of the “Explore Peru” headline or the contents in general from the Absolute Positioned Bar 1.

Notice in the bottom padding, you don’t have the 8em. The bottom padding is simply distance from the bottom of the bar. In large screens, 5vw with the 45px introduces a wide distance from the bottom. On mobile screens, you don’t need a huge distance so 5vw is perfect because it amounts to a small value.

Nothing was mentioned about Aspect Ratio in this thread so far. The VW unit helps in maintaining the desired aspect ratio also. Read more about Aspect Ratio here.

Notice the mountain background in the Adventure Ten demo. Our designer wants to show a good amount of the mountain across different screen sizes (desktop, laptop, tablet, phone).

Hope that helps.

[zacks_adm]

Hello @christian

I am familiar with the “relative” units, and thank you very much for your explanation. Now things are much clearer; I’d even say obvious

Consider this ticket resolved, and once again, thank you for the explanation.

BR!

[tristup]

Hi Zack,

Glad that we are able to help you.

Thanks