navigation arrow icons css on desktop

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!
 

Hi,

Which code did you use? Can you add here? We can check easier

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

Thank you. Which arrows are you referring to? Can you take a screenshot

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...:(

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>

On 3/22/2022 at 5:27 PM, Algernom said:

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>

Don't remove any code in your current code

Add this to Design > Custom CSS

div#page-section-62168712ccd863201d317cb5 .markdown-block {
    position: relative;
    z-index: 99999999;
}

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

On 3/24/2022 at 4:09 PM, Algernom said:

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

Add this code for both pages

div#page-section-606748c168606f65293ded31 .markdown-block, div#page-section-6015ff51ec0c2e6e6c00a915 .markdown-block {
    position: relative;
    z-index: 999999;
}

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!!!