Algernom
Member-
Posts
17 -
Joined
-
Last visited
Algernom's Achievements
-
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!!!
- 9 replies
-
- css
- navigation-link
-
(and 1 more)
Tagged with:
-
Algernom reacted to a post in a topic: navigation arrow icons css on desktop
-
Algernom reacted to a post in a topic: navigation arrow icons css on desktop
-
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
- 9 replies
-
- css
- navigation-link
-
(and 1 more)
Tagged with:
-
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>
- 9 replies
-
- css
- navigation-link
-
(and 1 more)
Tagged with:
-
Algernom reacted to a post in a topic: navigation arrow icons css on desktop
-
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...:(
- 9 replies
-
- css
- navigation-link
-
(and 1 more)
Tagged with:
-
Algernom reacted to a post in a topic: navigation arrow icons css on desktop
-
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; } }
- 9 replies
-
- css
- navigation-link
-
(and 1 more)
Tagged with:
-
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!
- 9 replies
-
- css
- navigation-link
-
(and 1 more)
Tagged with: