Squarespace 7.1 - Portfolio Captions Below Image on Mobile

Hello! I'm wondering if there is an easy way to get the Portfolio project titles to appear below the image on mobile only? On desktop, it's preferred that the title appears on hover, but for the user experience on mobile would prefer them to appear below the image (example in attached screenshot)

Thanks!

19 hours ago, skalison said:

Site URL: https://www.stephaniemaillard.com/serie-something-blue

Hello! I'm wondering if there is an easy way to get the Portfolio project titles to appear below the image on mobile only? On desktop, it's preferred that the title appears on hover, but for the user experience on mobile would prefer them to appear below the image (example in attached screenshot)

 

Thanks!

Does the title need to be within the box?

Does it fine with this location?

50 minutes ago, bangank36 said:

Does the title need to be within the box?

Does it fine with this location?

@bangank36 That looks like it could work! Overall looking to have the title appear without the hover effect on mobile.

On 10/6/2022 at 11:54 PM, skalison said:

That looks like it could work! Overall looking to have the title appear without the hover effect on mobile.

Add to Design > Custom CSS

/* Mobile-Portfolio title under image */
@media screen and (max-width:991px) {
div#gridThumbs {
    display: block !important;
}
.portfolio-text {
    opacity: 1 !important;
    position: relative !important;
}
}

Hi Tuanphan, this is exactly what I am looking for – it works great.

Is there a way to also align the portfolio title to the left, but only on mobile?

On my desktop version i have it set to centred and would like to keep that setting.

Thanks

On 10/21/2023 at 4:58 AM, benwithpen said:

Hi Tuanphan, this is exactly what I am looking for – it works great.

Is there a way to also align the portfolio title to the left, but only on mobile?

On my desktop version i have it set to centred and would like to keep that setting.

Thanks

Use this CSS code

@media screen and (max-width:767px) {
.portfolio-text {
    padding-left: 0px !important;
}
h3.portfolio-title {
    text-align: left !important;
}
}