# Aspect ratio sizing

**URL:** <https://forums.realmacsoftware.com/t/aspect-ratio-sizing/44405>\
**Category:** Elements API\
**Created:** [August 24, 2024, 3:57pm UTC](https://forums.realmacsoftware.com/t/aspect-ratio-sizing/44405 "2024-08-24T15:57:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 24, 2024, 3:57pm UTC](https://forums.realmacsoftware.com/t/aspect-ratio-sizing/44405/1 "2024-08-24T15:57:36Z")

</div>

I am trying to create my own entry for aspect ratio, tried a few ways but the output is always odd, might be missing some code

aspect-[12/ sm:aspect-[8/ md:aspect-[12/10] sm:14] md:8] lg:10]

I see on the video element you implemented the aspect ratio, works ok with auto wide and tall, but found an issue with custom, see video, I might be doing something wrong

when I look at inspect element I see aspect-[4/5] sm:aspect-[4/5] md:aspect-[custom]

[https://we.tl/t-9RNWwVg64i](https://we.tl/t-9RNWwVg64i)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 24, 2024, 8:51pm UTC](https://forums.realmacsoftware.com/t/aspect-ratio-sizing/44405/2 "2024-08-24T20:51:26Z")

</div>

video of what I tried, not the only way I tried

[https://we.tl/t-js9VmQAamK](https://we.tl/t-js9VmQAamK)

I tried with a text input eg 16/9 as well

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 26, 2024, 7:42am UTC](https://forums.realmacsoftware.com/t/aspect-ratio-sizing/44405/3 "2024-08-26T07:42:08Z")

</div>

this looks like “expected behaviour”, even though I can understand it might be confusing 😅

At the moment you are using the raw values from the controls directly in your template (`aspect-[{{car1}}/{{car}}]`) which will work as you want it to… until you override the setting on a breakpoint. At that point, Elements will return a string of responsively prefixed values (this is why you’re getting sm: / lg: prefixed values).

The fix is actually tricker than one might imagine - you’d need to use the hooks file to massage the values from the two controls in to correctly formatted values for each breakpoint.

If that doesn’t sound too scary then I might be able whip up an example for you later today/tomorrow - let me know! 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 26, 2024, 8:38am UTC](https://forums.realmacsoftware.com/t/aspect-ratio-sizing/44405/4 "2024-08-26T08:38:01Z")

</div>

@Bon please if you could provide an example, that would be great, give me an idea what else is possible.

On the same subject you video component allows for custom aspects but these do not seem to work for each breakpoint. If you use auto wide and tall they do. Is this a similar issue

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 26, 2024, 12:45pm UTC](https://forums.realmacsoftware.com/t/aspect-ratio-sizing/44405/5 "2024-08-26T12:45:26Z")

</div>

your image component only works across different breakpoints with auto wide and tall, custom has the same setting across breakpoints