7.1 Different portfolio layouts for desktop and mobile

Site URL: https://casafloraliaa.squarespace.com

ps: studio

hi everyone, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile with text alignment to the center.

Is that possible?

On 4/6/2021 at 2:30 AM, casafloralia said:

Site URL: https://casafloraliaa.squarespace.com

ps: studio

hi everyone, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile with text alignment to the center.

Is that possible?

I don't think it possible, would require extensive custom code for this

On 4/6/2021 at 2:30 AM, casafloralia said:

Site URL: https://casafloraliaa.squarespace.com

ps: studio

hi everyone, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile with text alignment to the center.

Is that possible?

Hi. Add to Settings . Advanced > Code injection > Header

<style>
    .portfolio-custom {
        padding: 0 3vw;
    }
    .portfolio-custom a {
        display: block;
        margin-bottom: 3vw;
    }
    .portfolio-custom a img {
        width: 100%;
    }
    .portfolio-custom a h3 {
        margin-top: 0;
    }
    @media screen and (min-width: 800px) {
        .portfolio-custom {
            display: none;
        }
    }
    @media screen and (max-width: 800px) {
        .portfolio-hover {
            display: none;
        }
    }
</style>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    window.onload = function () {
        if (Static.SQUARESPACE_CONTEXT.collectionId == "5e8a697fd7a6d83f2f1de30e") {
            $portfolioHover = $(".portfolio-hover");
            if ($portfolioHover.length > 0) {
                var images = [];
                $portfolioHover.find(".portfolio-hover-bg-img img").each(function () {
                    images.push($(this).data("src"));
                });
                $portfolioHover.parent().prepend('<div class="portfolio-custom">');
                $portfolioHover.find(".portfolio-hover-item").each(function (i) {
                    $(".portfolio-custom").append(`
                        <a href="${$(this).attr("href")}">
                            <img src="${images[i]}" />
                            <h3>${$(this).text().trim()}</h3>
                        </a>
                    `);
                });
            }
        }
    };
</script>

11 hours ago, tuanphan said:

Hi. Add to Settings . Advanced > Code injection > Header

<style>
    .portfolio-custom {
        padding: 0 3vw;
    }
    .portfolio-custom a {
        display: block;
        margin-bottom: 3vw;
    }
    .portfolio-custom a img {
        width: 100%;
    }
    .portfolio-custom a h3 {
        margin-top: 0;
    }
    @media screen and (min-width: 800px) {
        .portfolio-custom {
            display: none;
        }
    }
    @media screen and (max-width: 800px) {
        .portfolio-hover {
            display: none;
        }
    }
</style>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    window.onload = function () {
        if (Static.SQUARESPACE_CONTEXT.collectionId == "5e8a697fd7a6d83f2f1de30e") {
            $portfolioHover = $(".portfolio-hover");
            if ($portfolioHover.length > 0) {
                var images = [];
                $portfolioHover.find(".portfolio-hover-bg-img img").each(function () {
                    images.push($(this).data("src"));
                });
                $portfolioHover.parent().prepend('<div class="portfolio-custom">');
                $portfolioHover.find(".portfolio-hover-item").each(function (i) {
                    $(".portfolio-custom").append(`
                        <a href="${$(this).attr("href")}">
                            <img src="${images[i]}" />
                            <h3>${$(this).text().trim()}</h3>
                        </a>
                    `);
                });
            }
        }
    };
</script>

 

Hi there, thanks for posting this. I just tried the same code for my website but it seems not to work... 

my website: https://pufferfish-lion-mkrm.squarespace.com/

password: sqr

Any idea what's the trick? @tuanphan

On 4/13/2021 at 1:47 AM, karo said:

Hi there, thanks for posting this. I just tried the same code for my website but it seems not to work... 

my website: https://pufferfish-lion-mkrm.squarespace.com/

password: sqr

Any idea what's the trick? @tuanphan

You want move title under square border on //workwork page?

Is there a way to tweak this to have Grid:Overlay for Desktop, and Grid: Simple for Mobile (I found when viewing the grid overlay in tests the text doesn't show because mobile users dont hover over buttons)

On 12/2/2023 at 3:29 AM, amphotovideo said:

Is there a way to tweak this to have Grid:Overlay for Desktop, and Grid: Simple for Mobile (I found when viewing the grid overlay in tests the text doesn't show because mobile users dont hover over buttons)

You can set Grid: Overlay on Settings, then use this code to Website Tools (under Not Linked) > Custom CSS to change it to Grid: Simple on Mobile

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}