Jump to content

portfolio to slideshow in mobile

Go to solution Solved by CorinnaR,

Recommended Posts

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 ☺️

 

 

Bildschirmfoto 2024-02-08 um 10.55.18.png

Bildschirmfoto 2024-02-08 um 10.55.28.png

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

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

 

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.