Hi, I would like to have the arrows at the same height as the text on mobile, can someone help me with this
Topic summary
A user seeks help adjusting the vertical position of navigation arrows on mobile devices to align with text content. They provide a preview link and screenshot showing the current misalignment.
Solutions Proposed:
Two community members offer CSS code fixes targeting mobile screens (max-width: 500-749px):
- First solution: Adds CSS to base.css or custom CSS file, adjusting
topposition to 30% with a transform property - Second solution: Recommends adding CSS directly to the section’s Custom CSS area, setting
top: 30% !importantfor the arrow buttons
Both approaches use media queries to target mobile viewports specifically and modify the positioning of the previous/next arrow buttons. The second response includes a screenshot demonstrating the expected result after applying the fix.
Status: The issue has received two working solutions but no confirmation yet from the original poster on whether either resolved the problem.
1 Like
try adding this in your base.css file or your custom css file
@media screen and (max-width:500px){
button.image-text-btn-prev-template--24039743357252__ss_video_with_text_5_iyV86z,.button.image-text-btn-next-template--24039743357252__ss_video_with_text_5_iyV86z{
top:30%;
transfrom:translate(-30%);
}
Hi @User026
Please add this code to Custom CSS of that section to do that
@media (max-width: 749px) {
.image-text-btn-prev-template--24039743357252__ss_video_with_text_5_iyV86z, .image-text-btn-next-template--24039743357252__ss_video_with_text_5_iyV86z { top: 30% !important; }
}
