Pagination Style on slider mobile version

Greetings.
How to fix the error of displaying pagination style in mobile and tablet version. This element is displayed only in the desktop version. Also wanted to ask how I can move in the mobile version arrows on the slider a little closer to the center, so that they were not glued to the very edges of the screen.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Please, confirm the permission for plugins deactivation, and switching to the parent theme. As soon as we complete the testing we will enable all back, however, the site would be without plugins for 15-20 min. You would better make the full backup of your site.

Best Regards

Of course, the backup is created automatically at my place. You have my full authorization.

Still waiting for your connection, links and access provided above

I gave you guys all the access two days ago. When do we expect your decision?

Hello,

Sorry for the delay.

The pagination is not possible to change on mobile.

The errors can be removed with custom CSS:

body .arrows-style-1 .flickity-button.previous {
    justify-content: flex-start;
}
body .arrows-style-1 .flickity-button.next {
    justify-content: flex-start;
}

You need to add the code to the Theme Settings > Custom CSS > Tablet/Mobile.

Best Regards

The pagination is not possible to change on mobile…
I don’t need to change it, I don’t have it displayed…I want to solve this problem. Paganation work on desktop and don’t on mobile

Code that u provided

body .arrows-style-1 .flickity-button.previous {
    justify-content: flex-start;
}
body .arrows-style-1 .flickity-button.next {
    justify-content: flex-start;
}

Resolve only right arrow, left arrow stays same

Hello,

The dots are hidden on mobile, add this code to the Theme Settings > Custom CSS > Global to show them:

@media (max-width: 768px) {
	
	body .flickity-page-dots {
		display: flex;
	}
}

Please replace the code for arrows for this one:

@media (max-width: 769px) {

body .arrows-style-1 .flickity-button.previous {
    justify-content: center;
}
body .arrows-style-1 .flickity-button.next {
    justify-content: center;
}	
}

Remote the previous code from Tablet/Mobile and insert into Glogal.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts