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

Hm, it should have. Works for me:

image

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

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

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

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.

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.

1 Like