# The layout of the discount calculator

**URL:** <https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699>\
**Category:** Customization\
**Created:** [September 3, 2024, 5:17am UTC](https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699 "2024-09-03T05:17:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Reza\_Natoori](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/reza_natoori/32/36079_2.png) [@Reza\_Natoori](https://community.elfsight.com/u/Reza_Natoori)\
**Post date:** [September 3, 2024, 5:17am UTC](https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699/1 "2024-09-03T05:17:30Z")

</div>

Hi,  
I have created a discount calculator. Can I set the presenting layout to vertical or horizontal?  
Thanks

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 3, 2024, 1:07pm UTC](https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699/3 "2024-09-03T13:07:40Z")

</div>

Hi there @Reza_Natoori 👋

Do you want to move the results section under the fields or place different fields side by side: Single session price, Discount Percent, Number of Sessions (from left to right)?

---

<div class="post-metadata">

**Author:** ![Reza\_Natoori](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/reza_natoori/32/36079_2.png) [@Reza\_Natoori](https://community.elfsight.com/u/Reza_Natoori)\
**Post date:** [September 5, 2024, 5:15am UTC](https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699/4 "2024-09-05T05:15:10Z")

</div>

Yes, I want to move the results section under the fields.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 5, 2024, 12:49pm UTC](https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699/5 "2024-09-05T12:49:51Z")

</div>

This code should work for you:

```auto
[class*="widget__Layout-sc"] {
  grid-template-columns: minmax(0px, 1fr);
}

[class*="results__Container-sc"] {
  position: static;
}

```

  

Add it to the Custom CSS field on the Settings tab of your widget’s settings and let me know if you like the result 🙂

---

<div class="post-metadata">

**Author:** ![Reza\_Natoori](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/reza_natoori/32/36079_2.png) [@Reza\_Natoori](https://community.elfsight.com/u/Reza_Natoori)\
**Post date:** [September 5, 2024, 9:32pm UTC](https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699/6 "2024-09-05T21:32:22Z")

</div>

Thank you. It would be a good idea to add this capability as a standard feature on the widgets.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 6, 2024, 10:08am UTC](https://community.elfsight.com/t/the-layout-of-the-discount-calculator/68699/7 "2024-09-06T10:08:31Z")

</div>

Yeah, I agree that it would be a great option. I’ve added it to the Wishlist on your behalf - [Vertical layout](https://community.elfsight.com/t/vertical-layout/69193)

By the way, I’d like to invite you to join our new challenge. Just share a link to your Calculator widget and describe how you are using it for a chance to win **6 FREE** months 🎁

Check the details and participate - [August Challenge: Build Your Calculator and Win Up To 6 FREE Months ⚡](https://community.elfsight.com/t/august-challenge-build-your-calculator-and-win-up-to-6-free-months/63981)