Jump to content

7.1 Different portfolio layouts for desktop and mobile

Recommended Posts

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.