# Layout styles for better information dispaly

**URL:** <https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208>\
**Category:** Feature Requests\
**Created:** [September 9, 2024, 9:23pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208 "2024-09-09T21:23:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rjp](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@rjp](https://community.noloco.io/u/rjp)\
**Post date:** [September 9, 2024, 9:23pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/1 "2024-09-09T21:23:55Z")

</div>

Are there any work around to try and create similar layouts?

 ![IMG_1039](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/1X/43c2d9a9340e9612201bec2ea6cb0b183cd0e467.jpeg)

---

<div class="post-metadata">

**Author:** ![rjp](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@rjp](https://community.noloco.io/u/rjp)\
**Post date:** [September 15, 2024, 2:25pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/2 "2024-09-15T14:25:14Z")

</div>

IMG:https://hs-5408054.f.hubspotemail.net/hub/5408054/hubfs/email17-messages.png?width=520&upscale=true&name=email17-messages.png

Options like this would be great.

---

<div class="post-metadata">

**Author:** ![darragh](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/darragh/32/12_2.png) [@darragh](https://community.noloco.io/u/darragh)\
**Post date:** [September 16, 2024, 10:46am UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/3 "2024-09-16T10:46:43Z")

</div>

Hey @rjp thanks for the interesting suggestions.

This sort of layout might be achievable with a combination of

- Containers (to setup 2 columns)
- Statistics with Gauge charts
- Charts with Pie / Gauge Charts
- Fields displayed in a details block with the display set to progress bar

It will definitely get you pretty close

---

<div class="post-metadata">

**Author:** ![rjp](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@rjp](https://community.noloco.io/u/rjp)\
**Post date:** [September 16, 2024, 9:44pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/4 "2024-09-16T21:44:44Z")

</div>

i could get really close to the progress bar if i could get it to be 100% any trick to that i get about 75% when i select FULL

---

<div class="post-metadata">

**Author:** ![darragh](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/darragh/32/12_2.png) [@darragh](https://community.noloco.io/u/darragh)\
**Post date:** [September 17, 2024, 5:47am UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/5 "2024-09-17T05:47:38Z")

</div>

> if i could get it to be 100% any trick to that i get about 75% when i select FULL

This setup is what I was expecting to build, I’ve set the progress bars to `Full`

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/1X/dab2541460cd3fafc718aa7bef32474c36aced59.png)

---

<div class="post-metadata">

**Author:** ![rjp](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@rjp](https://community.noloco.io/u/rjp)\
**Post date:** [September 17, 2024, 1:26pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/6 "2024-09-17T13:26:17Z")

</div>

i can only get the progress bar to cover 75% even when i set to full? am i doing something wrong  
 ![Screenshot 2024-09-17 at 9.24.33 AM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/1X/bdad98b4fac3418ea540a8cee7876d7edec0e8c9.png)  
or will it only go to 75%?

---

<div class="post-metadata">

**Author:** ![rjp](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@rjp](https://community.noloco.io/u/rjp)\
**Post date:** [September 18, 2024, 1:51pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/7 "2024-09-18T13:51:14Z")

</div>

any ideas? im at a loss for what to do, as im taking up a lot of space to show little information.  
 ![Screenshot 2024-09-18 at 9.47.27 AM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/1X/9489d94f83e78d722dac06b0fbcfc35790466454.png)

---

<div class="post-metadata">

**Author:** ![rjp](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@rjp](https://community.noloco.io/u/rjp)\
**Post date:** [September 18, 2024, 1:58pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/8 "2024-09-18T13:58:10Z")

</div>

I could get at the verey least twice the information in the same space

 ![Screenshot-2024-09-18-at-9.47.27 AM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/1X/8ca162001042ebc2447dcabdee7f89b7ea5586bf.png)

---

<div class="post-metadata">

**Author:** ![darragh](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/darragh/32/12_2.png) [@darragh](https://community.noloco.io/u/darragh)\
**Post date:** [September 18, 2024, 2:05pm UTC](https://community.noloco.io/t/layout-styles-for-better-information-dispaly/1208/9 "2024-09-18T14:05:15Z")

</div>

> I could get at the verey least twice the information in the same space

If you’re able to achieve the same thing with Custom CSS, I would recommend doing that.

You could also remove the labels, as it’s probably intuitive to your team that it’s start and end

If you want to send me a link to the page I can explore why it’s not filling the full width
