I have a carousel and when looking at it on mobile, I can see that the pagination/progression circles (not sure the technical term) are showing at the bottom but they are cut off so you can only see the tops of them (see screenshot - specific area in question circled in red). Is there a setting I am missing?
What I have tried so far:
- Adjusting padding & margins in both the inner and outer rows as well as the columns for this section
- Adjusting padding & margins in both the inner and outer rows as well as the columns for the section below
- Changing the outer row type to "In Container" from "Full Width Background"
- Changing content position to "Top" from "Default"
All of these changes just seemed to move the circles but doesn't reveal them any better.
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
I have a carousel and when looking at it on mobile, I can see that the pagination/progression circles (not sure the technical term) are showing at the bottom but they are cut off so you can only see the tops of them (see screenshot - specific area in question circled in red). Is there a setting I am missing?
What I have tried so far:
- Adjusting padding & margins in both the inner and outer rows as well as the columns for this section
- Adjusting padding & margins in both the inner and outer rows as well as the columns for the section below
- Changing the outer row type to "In Container" from "Full Width Background"
- Changing content position to "Top" from "Default"
All of these changes just seemed to move the circles but doesn't reveal them any better.
Attached files: Carousel-cut-off.jpg
Hello Melanie,
Thanks for writing to us.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
.nectar-flickity[data-control-style=material_pagination] .flickity-page-dots .dot, .nectar-flickity[data-controls=material_pagination] .flickity-page-dots .dot, .nectar-recent-posts-slider_multiple_visible .flickity-page-dots .dot, .nectar-woo-flickity .flickity-page-dots .dot, .testimonial_slider[data-style=multiple_visible_minimal] .flickity-page-dots .dot, body.material [data-bullet_style=see_through] .slider-pagination .swiper-pagination-switch { margin-bottom: 1em ! IMPORTANT; }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Thank you Judith, that worked great!
Hi Melanie,
You're welcome.
Should you have any further questions or encounter any issues, please don't hesitate to reach out.
Best regards,