Alternative background images on mobile site

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

Hello! I'm using the "Zion" template (7.1) for my site. On the homepage, when I hover my cursor on the links, the background image would change accordingly.

It works really great on the desktop version. However some images don't work as well on mobile. Therefore I'd like to switch out different background images for the mobile version for some of the links (still maintain the upon hover behaviour).

I did some research and found some CSS scripts that suppose to switch background depends on devices, but they don't seem to work with the "upon hover" link on my site - perhaps that's because this template behaves differently and the script need to be a bit more custom?

Would be great to get some help on this. Thank you so much 🙂

It looks like not possible. How about changing to grid layout on mobile only?

1 hour ago, tuanphan said:

It looks like not possible. How about changing to grid layout on mobile only?

Ah ok - Do you mean I could change my homepage to a grid layout on mobile only? That'd be awesome if that's possible. Could you show me how to do it? Thank you!

Hello again @tuanphan , just wondering if you've figured out if it's possible to change the homepage to a grid layout for just mobile only? 

If not, alternatively, do you know if it's possible to have different portfolio "height" in the desktop and mobile version? In desktop, the ideal height for my site is "Large", whereas in mobile, the ideal setting is "Custom" with a value of 70 (see my screen grab). Is there a way to override this value for mobile through Custom CSS?

On 4/26/2022 at 3:46 PM, kennyi said:

Ah ok - Do you mean I could change my homepage to a grid layout on mobile only? That'd be awesome if that's possible. Could you show me how to do it? Thank you!

Sorry for delay. Add this to Settings > Advanced > Code Injection > Footer > Then check again on real mobile

<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 == "62557320842e996827e52e20") {
            $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>

21 hours ago, tuanphan said:

Sorry for delay. Add this to Settings > Advanced > Code Injection > Footer > Then check again on real mobile

<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 == "62557320842e996827e52e20") {
            $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>

 

Thanks so much @tuanphan. But unfortunately I'm only on a personal plan with Squarespace and hence don't have access to Custom Code Injection 😞

I don't suppose the same thing could be done in custom CSS?

On 5/6/2022 at 2:58 AM, kennyi said:

Thanks so much @tuanphan. But unfortunately I'm only on a personal plan with Squarespace and hence don't have access to Custom Code Injection 😞

I don't suppose the same thing could be done in custom CSS?

Try edit Site Footer > Add a Markdown Block > Paste the code & check again