Home App Docs Blog Github

Adjusting carousel height and pagination/arrows

This post was flagged by the community and is temporarily hidden.

Hi @lulimag!

I took a look at the carousel in the content link you provided. To make the carousel full page width, you can remove the padding-left and padding-right values. The boxes within the carousel have fixed heights, so you’ll want to adjust these (not just the height of the carousel layer). Once you do this, the pagination dots should move as well.

To adjust the position of the arrows to be like the example above, you’ll need to add styling in the content JS + CSS section similar to this:

.slick-prev {
left: 20px;
}

.slick-next {
right: 20px
}

Hi! So the full page width worked, but when I applied the CSS styling to the arrows they dissapeared

@lulimag,

It looks like the styling wasn’t applying to the arrows (they were off-screen once you removed the padding). I updated the styling to be:

.slick-next {
right: 20px !important;
}

.slick-prev {
left: 20px !important;
}

Do the arrows look as expected now?

@maddy Hi! My post got marked as spam for some reason - but I’m having an issue where I applied the above styling to the hero (which works - thanks!!) but it’s also applying it to my reviews carousels which is covering the text. Do you know how I can fix this?

Hi @lulimag!

I gave the hero carousel a class name and applied the styling to the slick arrows and this class, so it shouldn’t affect your reviews carousel anymore. Does everything look as expected on your end now?

Yes @maddy thank you so so much!!