CorinnaR

@tuanphan it works again, you are the best! if you can now get the arrow to appear in the hidden second section as well, i will finally shut up in this thread and be forever grateful to you! 😂

@tuanphan code block is added, still not working.. thanks for checking!

@tuanphan so I think that's where my problem is - the arrow on the first section (portfolio desktop) does not lead to the next section, but the one after that, since the gallery for mobile is squeezed in there but hidden for desktop. which is why I would need the arrow to show up in both the first AND second section (Portfolio desktop + gallery mobile) and BOTH should lead to the third section saying "hi - wir sind.." adding the "#" didn't change anything, still not jumping to that section. but that might be because its not the next. edit: added a screenshot for explanation

@tuanphan Yes, kind of! the text is now basically just the title of the gallery image showing. is there another way to add text over this being able to for example change the fontsize and add more than 3 lines of text? it just cuts off there right now. that might be helpful for the future.

@tuanphan I already had that thought, but nothing is happening whatever I change this to. in my mind I would need to link not to "next-section" (since the next section is the one not showing, its hidden on desktop) but to the specific section it should jump to. but all combinations of putting in the section ID did not work for me. does that make sense? and for getting the arrow into the mobile gallery slideshow I think I'd need to add first AND second child as the location of the arrow. but also here I couldn't figure out what I need to put into the code to make it work. in summary, I need the arrow in the first AND second section (only one of both is showing at a time) to link to the third section. see screenshots attached 😊

Done (only in mobile)! https://www.studioapplaus.de

@tuanphan this is the code I used (in header) , which I got from another post on here. I can also switch to a different code if that's easier 🙂 edit: found the syntax-error, the arrow is now showing again in desktop mode but still not jumping to the section. plus it should show up in the mobile slideshow gallery as well. <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> #page section:first-child a.next-section { padding-top: 70px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } #page section:first-child a.next-section span { position: absolute; top: 0; @media screen and (max-width: 767px) { top:-100%;} left: 50%; width: 20px; height: 20px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 3s infinite; animation: sdb05 3s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } </style> <script> $(function() { $("#page section:first-child").append('<a href="next-section" class="next-section"><span></span></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear'); }); }); </script>

@tuanphan I'm using this on my site, but after inserting another section (for switching to a different mobile portfolio) the arrow does not work anymore. Probably because the section it is currently linked to does not show on desktop? is it possible to make it jump to a specific section, in this case the one saying "hi - wir sind studio applaus"? I already tried inserting the section id of this specific section in various placements, but that didn't work and I don't want to break the code there. Also I'd love to have the same arrow in the mobile page - I'm switching to a gallery slideshow there. could you help me out with that? page: https://scarlet-clementine-rsng.squarespace.com pw: applaus (we just went online, maybe you won't need that anymore)

I actually got close to the solution with adding another section under the portfolio as a gallery slideshow and inserting the following code to "custom css"! for anyone using this, the collection and section ids would then be different. this way I now only have a single project-name on show, so if there would be a solution to put the "highlighted list" as a text on front that would be nice, but not necessary. maybe someone has a solution to this in the long run 😊 // slideshow // #collection-6548e6c4d402863b7021bc5c { figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { top: 75%; left: 0; text-align: center; max-width: 90%; } figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * { font-size: 40px; font-family: bely-display; color: white } .gallery-fullscreen-slideshow { margin-bottom: 0px !important; }} /* Hide portfolio on Mobile */ @media screen and (max-width:767px) { section[data-section-id="6548e6c4d402863b7021bd00"]{ display: none; } } /* Hide slideshow on Tablet - Desktop */ @media screen and (min-width:768px) { section[data-section-id="65c4c91f1b9df95ba0c4ffeb"] { display: none; } }

@ggimishev how did you solve this in the end? @tuanphan could you maybe share the code for this solution that you mentioned earlier?

Hi there, I'm trying to find a workaround to display portfolio items in mobile. pw: applaus on desktop, I'm using the mouseover-background layout, which doesn't work smoothly in mobile since not having a cursor to mouseover with. So on mobile I would love to switch to a slideshow (if possible with additional autoplay) while having the list of items still showing as in desktop and highlighting/coloring the one currently on show. See screenshot from the mobile-preview on desktop for reference, this as a slideshow/autoplay (without having to mouseover) would be exactly what im looking for.. If the list of items on top is not possible, that's okay too - then I'd just like to have a title centered on the bottom of the image. Ideally, the slideshow would not change size with the pictures but always be full width with a fixed height and cover the full mobile screen when opening the site, as it is now. is there any way to achieve this? I'd be forever grateful ☺️

Hi @RGCreative How did you achieve the autoplay in your portfolio section? would love something like this as well! Also, did you find a solution to the mobile view? I'm currently facing the exact same problem and can't seem to find a solution..

hi @tuanphan after copying the code in another topic for the change to grid i don't think it's gonna work for me. Instead i would like to keep it this way, but position the titles vertically in the center or at least a little higher up. this will then solve the problem of the titles hiding underneath the searchbar in mobile browsers. also i would need to push the arrow on the bottom a little upwards to make it visible. could you help me with a code for that? concerning the double tap on mobile: in another topic i found a website that uses this method - https://www.brethrendesignco.com/work - which is exactly what i am looking for. but i can't find the part of the source code that makes this work. is this any help for you?

Hi @thuanphan there is an animated arrow at the bottom, right where the C from natcon is. as for the mobile portfolio, let me try out the code for changing to grid - thank you!

hi, i'm working on finishing touches on the mobile version of my website. scarlet-clementine-rsng.squarespace.com pw: applaus The frontpage is too long when looking at it on my phone (iPhone through Safari, if that is important). is there a way to shorten the upper section to always fit into the screen, no matter which type oh phone? Also i would like to add a margin under the last item to not make it overlap with the arrow. and adding on to this, since it is mouseover, the interaction on mobile is not really intuitive. is there a way to either make the images appear on one tap, and then move onto the project page with a second tap OR make the images appear for a few seconds, one after another while highlighting the title (so like an "automatic mouseover") any help would be greatly appreciated! 😊