Jump to content

navigation arrow icons css on desktop

Recommended Posts

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!
 

 

Link to comment

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.