CSS ARROW SPACE

Store Design
, ,
1

Hey community,

Is it possible to help me in the mobile view, the arrow in the product page so close to the end of the screen.

Is it possible to remove a little the arrrow from the side screen WITHOUT touching the picture, i need the picture to stay full screen please ?

Thanks in advance

edibpe-sw.myshopify.com

psw : kingaaliya

IMG_1960.PNG
IMG_1960.PNG1290×2796 202 KB

View

2

Hello @AA226

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width:749px){ .my-gallery .slick-next, .slick-prev{ left: 9px !important; } }

Result:

Tech_Coding_0-1732619680469.png
Tech_Coding_0-1732619680469.png318×473 46.6 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Hello @AA226
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media (max-width: 749px) {
.slick-prev {
left: 3px;
}
.slick-next {
right: 3px;
}
}

Thanks

4

Thank you,

You’re the only one that work. Just when you click one on the button to see the next picture, the left button move and go back on the place he used to be (so close to the side of the screen), do you have a solution for this please?