Jump to content

Alternative background images on mobile site

Recommended Posts

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 🙂

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

Link to comment

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?

image.png

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

 

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
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?

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

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.