Algernom

Thank you so much! All of them work now! Super!
It was weird if I write the CSS separately then some of them don't work.
When I write it together as you showed above then they work.
Thank you!!! 
 

HI Tuanphan, 
Thank you so much for the help! Amazing, it works on all pages, except for two that comes straight after it.

https://alpaca-teal-6mye.squarespace.com/en/films/violetcrumble
https://alpaca-teal-6mye.squarespace.com/en/films/6meters

and this is the markdown I use on the site itself.

<a href="name of the previous page"><i class="custom"></i></a>

<a href="name of the next page"><i class="custom2"></i></a>

Hi tuanphan,
the ones next to the video. I tried chrome and Safari.
on mobile, the arrows work but not on the computer.
They use to work only recently I noticed they don't...:(

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;
    }
}

Site URL: https://alpaca-teal-6mye.squarespace.com/en/films/trioarissa

Hi guys,

I have a custom css code that helps to navigate to the next page in portfolio on squarespace 7.1. It worked before. Now I realized that it only works on the mobile version but not on desktop.
I noticed in inspector that the link block somehow on desktop become 0x0 px...

I hope some of you can help!
Thank you in advance!