# \[SOLVED\] How would I use stylesheets.css to overwrite the sizing on a carousel viewport?

**URL:** <https://forum.inductiveautomation.com/t/solved-how-would-i-use-stylesheets-css-to-overwrite-the-sizing-on-a-carousel-viewport/73971>\
**Category:** Ignition\
**Created:** [May 19, 2023, 8:06pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-use-stylesheets-css-to-overwrite-the-sizing-on-a-carousel-viewport/73971 "2023-05-19T20:06:27Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 24, 2023, 4:03pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-use-stylesheets-css-to-overwrite-the-sizing-on-a-carousel-viewport/73971/21 "2023-05-24T16:03:12Z")

</div>

> [@bmeyers](#):
>
> For the third one the !important flag didn't do anything

Hm, it should have. Works for me:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8feed2f8e0338aa06c5a943f74895305dd13cdc5.png)

```css
.psc-customCarousel .dots-container {
	height: 70px;
}

.psc-customCarousel .dot {
	width: 50px !important;
}

```

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 24, 2023, 4:04pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-use-stylesheets-css-to-overwrite-the-sizing-on-a-carousel-viewport/73971/22 "2023-05-24T16:04:37Z")

</div>

Hmmm, I tried it again and it worked. Maybe I had a typo.

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [May 25, 2023, 7:57pm UTC](https://forum.inductiveautomation.com/t/solved-how-would-i-use-stylesheets-css-to-overwrite-the-sizing-on-a-carousel-viewport/73971/23 "2023-05-25T19:57:28Z")

</div>

Adding on some details for the next guy / gal who stumbles on this problem. I want to clarify the solution if it isn't already obvious since my problem was I didn't know what I was looking for.

In Firefox you can right click on the component you want to edit.and the Inspector will pull up the line(s) that are relevant for you. On the right hand side then you will be given the correct selector to target in this case **[data-component="ia.display.carousel"] .dots-container .dot**.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f292dd29bed4070c6ea33242ad7cbe19537c57f.jpeg)

You can then target that selector by pasting it into stylesheet.css in your project and overwriting the options available in Firefox Inspector (height, width, margin, cursor in this example). In my first screenshot above you can see I am targeting height and width which matches what is in my stylesheet.css.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/dedd6bef235a9948308e600e0b16252a3c27efa9.png)

[Previous page](https://forum.inductiveautomation.com/t/solved-how-would-i-use-stylesheets-css-to-overwrite-the-sizing-on-a-carousel-viewport/73971.md?page=1)