# How to adjust width of calendar view

**URL:** <https://forums.knack.com/t/how-to-adjust-width-of-calendar-view/18102>\
**Category:** Get Answers\
**Created:** [October 25, 2024, 6:20pm UTC](https://forums.knack.com/t/how-to-adjust-width-of-calendar-view/18102 "2024-10-25T18:20:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kristina](https://avatars.discourse-cdn.com/v4/letter/k/2acd7d/32.png) [@Kristina](https://forums.knack.com/u/Kristina)\
**Post date:** [October 25, 2024, 6:20pm UTC](https://forums.knack.com/t/how-to-adjust-width-of-calendar-view/18102/1 "2024-10-25T18:20:37Z")

</div>

Due to wide tables we have on parts of our app, we have it set to Full Width. But we have a calendar view on one page that I don’t want to take up the whole screen - it’s too wide.

How do I reduce the max width to 1000px or 75% of a calendar view?

---

<div class="post-metadata">

**Author:** ![Dean2](https://avatars.discourse-cdn.com/v4/letter/d/bcef8e/32.png) [@Dean2](https://forums.knack.com/u/Dean2)\
**Post date:** [October 26, 2024, 2:49am UTC](https://forums.knack.com/t/how-to-adjust-width-of-calendar-view/18102/2 "2024-10-26T02:49:57Z")

</div>

Hi Kristina

Here’s a couple of CSS samples we’ve used:

/_==================RESIZE & CENTRE CALENDAR view========================_/  
/\* replace with your view # \*/

#view\_681 \> div.knack-calendar.fc {  
height: 75% !important;  
width: 75% !important;  
}

#view\_681 \>div.knack-calendar.fc {  
margin-left: 30%;  
transform: translate(-25%, 0%);  
text-align: center;  
align-content: center;  
justify-content: center;  
object-position: 50% 50%;  
columns: center;  
}  
/_==================RESIZE & CENTRE CALENDAR view========================_/

/_==================RESIZE & REPOSITION CALENDAR view========================_/  
/\* Location & Jobs _/  
/_ replace with your view # \*/

#view\_1613 \> div.knack-calendar.fc {  
height: 30% !important;  
width: 30% !important;  
}

#view\_1613 \>div.knack-calendar.fc {  
margin-left: 7.5%;  
transform: translate(-25%, 0%);  
text-align: center;  
align-content: center;  
justify-content: center;  
object-position: 50% 50%;  
columns: center;  
}  
/\*==================RESIZE & CENTRE CALENDAR

Dean