Hi tuanphan,
Thank you so much for your help!
This is the css I used:
// films navigation arrow icons //
.custom::after {
font-family: 'squarespace-ui-font';
font-style: normal;
font-weight: bold;
position: absolute;
left:0;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
speak: none;
content: "\e02c";
}
.custom2::after {
font-family: 'squarespace-ui-font';
font-style: normal;
font-weight: bold;
position: absolute;
right:0;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
speak: none;
content: "\e02d";
}
and this is what I used for correcting the position of the arrows:
// films navigation arrow positions //
/* desktop */
@media screen and (min-width: 768px)
{
/* left arrows */
#block-a08a36fa2cf4f36f6848, #block-yui_3_17_2_1_1605728961322_6253, #block-yui_3_17_2_1_1605728408704_16161, #block-yui_3_17_2_1_1605696662487_7459, #block-yui_3_17_2_1_1605713170684_6361,#block-21ed898d97243f7eed58{
margin-top:85%!important;
opacity:1!important;
}
/* right arrows */
#block-88d324cc118c1437fbdc, #block-yui_3_17_2_1_1605728961322_7054, #block-yui_3_17_2_1_1605728408704_17669, #block-yui_3_17_2_1_1605711612929_6571, #block-yui_3_17_2_1_1605713170684_10334,#block-804d144ba6cf4392e091 {
margin-top:85%!important; opacity:1!important;
}
/* videos */
#block-yui_3_17_2_1_1608255212274_19709, #block-yui_3_17_2_1_1608253365612_6340, #block-b49a73db14a5be344de2,
#block-yui_3_17_2_1_1605008584019_12342,#block-5ee80c45007fe037ea55{
margin-top:-27%!important;
opacity:1!important;
}
}
/* desktop tanz.fabrik, 6 meters, violet */
@media screen and (min-width: 768px)
{
#block-yui_3_17_2_1_1605728408704_16161, #block-e36e829fd06ee150a179, #block-d34ea583881c805c958e,#block-922ca16a4a7f963179c5{
margin-top:50%!important;
opacity:1!important;
}
#block-yui_3_17_2_1_1605728408704_17669, #block-6cada0f06127da74f8b3, #block-81beceb5fe459b85148d,#block-06973fe99af81787a097{
margin-top:50%!important; opacity:1!important;
}
#block-yui_3_17_2_1_1604846137032_11929, #block-yui_3_17_2_1_1604846137032_18607,#block-46e282bdb479d198c20f,#block-yui_3_17_2_1_1612059187257_30744, #block-ba0bb4d56e409f736152, #block-203df9013a75110ab161,#block-e7708bc76bd687137863,#block-5cd366cc6d858fd98391{
margin-top:-30%!important;
opacity:1!important;
}
}
/* mobile */
@media screen and (max-width: 768px)
{
/* left arrows */
#block-a08a36fa2cf4f36f6848, #block-yui_3_17_2_1_1605728961322_6253, #block-yui_3_17_2_1_1605728408704_16161, #block-yui_3_17_2_1_1605696662487_7459, #block-yui_3_17_2_1_1605713170684_6361,#block-21ed898d97243f7eed58 {
margin-top:5%;
z-index:99;
}
/* right arrows */
#block-88d324cc118c1437fbdc, #block-yui_3_17_2_1_1605728961322_7054,
#block-yui_3_17_2_1_1605728408704_17669, #block-yui_3_17_2_1_1605711612929_6571, #block-yui_3_17_2_1_1605713170684_10334,#block-804d144ba6cf4392e091 {
margin-top:-9%;
z-index:98;
}
/* videos */
#block-yui_3_17_2_1_1608255212274_19709, #block-yui_3_17_2_1_1608253365612_6340,
#block-b49a73db14a5be344de2,
#block-yui_3_17_2_1_1605008584019_12342,#block-5ee80c45007fe037ea55{
position: center;
margin:0 auto;
width:70%;
margin-top:-25%!important;
opacity:1!important;
}
}
/* mobile tanz.fabrik, 6 meters, violet */
@media screen and (max-width: 768px)
{
#block-yui_3_17_2_1_1605728408704_16161,#block-e36e829fd06ee150a179, #block-d34ea583881c805c958e,#block-922ca16a4a7f963179c5,{
margin-top:12%;
z-index:98;
}
#block-yui_3_17_2_1_1605728408704_17669, #block-6cada0f06127da74f8b3, #block-81beceb5fe459b85148d, #block-06973fe99af81787a097{
margin-top:-9%;
z-index:99;
}
#block-yui_3_17_2_1_1604846137032_11929,#block-46e282bdb479d198c20f,#block-ba0bb4d56e409f736152,#block-e7708bc76bd687137863{
position: center;
margin:0 auto;
width:70%;
margin-top:-25%!important; opacity:1!important;
}
/* 6 meters, violet */
#block-yui_3_17_2_1_1612059187257_30744, #block-203df9013a75110ab161,#block-5cd366cc6d858fd98391,#block-yui_3_17_2_1_1645637787574_15257{
position: center;
margin:0 auto;
width:70%;
opacity:1!important;
}
}