Centering Pagination Horizontally
User
@media (max-width:767px){
.feedback-pagination::before, .feedback-pagination::after {
content: '';
display: block;
width: 50px !important;
height: 2px !important;
background-color: #fff;
opacity: 0.5;
}
.feedback-pagination {
position: absolute;
top: unset !important;
bottom: 70PX;
transform: translateY(0);
display: flex
;
flex-direction: row;
align-items: center;
gap: 20PX;
}
}
.feedback-pagination::before, .feedback-pagination::after {
content: '';
display: block;
width: 50px !important;
height: 2px !important;
background-color: #fff;
opacity: 0.5;
}
.feedback-pagination {
position: absolute;
top: unset !important;
bottom: 70PX;
transform: translateY(0);
display: flex
;
flex-direction: row;
align-items: center;
gap: 20PX;
}
}
I want to set this properly ! horizontally in middle
Assistant
To **center the `.feedback-pagination`** element horizontally on mobile (`max-width: 767px`), you need to apply the following changes:
1. Add `left: 50%` and `transform: translateX(-50%)` to center it.
2. Ensure `position: absolute` is retained.
3. Remove `transform: translateY(0)` if it's not doing anything useful.
### ✅ Updated CSS:
@media (max-width: 767px) {
.feedback-pagination::before,
.feedback-pagination::after {
content: '';
display: block;
width: 50px !important;
height: 2px !important;
background-color: #fff;
opacity: 0.5;
}
.feedback-pagination {
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
}This will position `.feedback-pagination` in the center **horizontally**, `70px` above the bottom of the screen on small devices.
Do you want the lines (`::before`, `::after`) to span fully across the screen or just on the sides of the pagination dots?