Different homepage style on mobile

Site URL: https://fongyu.co

Not sure if this is possible but I'd like to show the projects in a grid format instead of a list on mobile.

The template is Hawley.

I want to keep the current setting for desktop just want to tweak the mobile homepage. As you don't really hover when using a mobile the nice function is redundant. 

The current Desktop version

The project layout format is set to Hover: Follow Cursor

The current Mobile homepage

I'd like it to be

Is it possible?

Please help.

Thanks

It looks like you solved with this code?

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

On tablet, the text is a bit narrow. Do you want to increase width?

So glad I found this post. I have exact the same issue with the same template. I wanted to integrate the code but it says ‘syntaxis error at line 5’. I’m a total noob in coding, so can anyone tell me what I do wrong? Thanks!!

5 hours ago, JKXPVH said:

So glad I found this post. I have exact the same issue with the same template. I wanted to integrate the code but it says ‘syntaxis error at line 5’. I’m a total noob in coding, so can anyone tell me what I do wrong? Thanks!!

Add to Home > Settings > Advanced > Code Injection > Header

Hmm I've tried it, no more errors but in the mobile version there's no menu anymore. The page is blank except from the header.

On 1/24/2021 at 6:55 AM, JKXPVH said:

Hmm I've tried it, no more errors but in the mobile version there's no menu anymore. The page is blank except from the header.

Can you share link to your site? We can check easier

Hi!

I would like to solve another issue that I'm having with general project images on my homepage for the Desktop version.
I started from the Hawley template and already used code (see post above) to have a different project overview on the homepage version on mobile.

Right now the images are displayed perfectly how I want them on mobile > the drawings are centered and stacked:

But for the Desktop version I would like to display them like this (on the right side of the navigation):

Since I have to use one and the same image for both versions I'm wondering how this can be solved.

Is there any code I can use for this?

Would be great if someone could help me out.
Thanks!

On 2/14/2021 at 5:08 PM, JKXPVH said:

Hi!

I would like to solve another issue that I'm having with general project images on my homepage for the Desktop version.
I started from the Hawley template and already used code (see post above) to have a different project overview on the homepage version on mobile.

Right now the images are displayed perfectly how I want them on mobile > the drawings are centered and stacked:

 

 

But for the Desktop version I would like to display them like this (on the right side of the navigation):

Since I have to use one and the same image for both versions I'm wondering how this can be solved.

Is there any code I can use for this?

Would be great if someone could help me out.
Thanks!

Can you share site url?

It's already solved, thanks!

Wanting to replicate something similar to what is being described above. 

Is there a reason the menu items disappear when I add the above code to the website?

it seems to be the same issue you were facing here - 

On 10/31/2022 at 7:25 PM, James-Affixxius said:

it seems to be the same issue you were facing here - 

What is your site url? We can check easier