Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Different homepage style on mobile


FYU

Question

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

 

image.thumb.png.2a1be2f0c1bcda93dca1d592d4e4becb.png

 

The project layout format is set to Hover: Follow Cursor

image.thumb.png.05f827ff33da84177f903e950c377147.png

 

image.thumb.png.5c40b9d1f1143a765e94eb0953c9c0e7.png

 

The current Mobile homepage

image.thumb.png.58ff1dbf63c71eabba67baa27c5a7669.png

 

I'd like it to be

image.thumb.png.0a83756637b75a26f09702624ae67332.png

 

 

Is it possible?

Please help.

 

Thanks

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

8 answers to this question

Recommended Posts

  • 0

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?

image.thumb.png.8e5e5f82e931e53586d6f2e86a1a0d89.png

Link to post
  • 0

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

Link to post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0

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:

 

1169392934_Screenshot2021-02-07at19_55_13.png.ef80ee62cbb1811f4155afa91571e983.png

 

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

540542601_Screenshot2021-02-14at10_28_25.thumb.png.8e4b0cf342a354e5acd83cf84b5c6c28.png

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!

Link to post
  • 0
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:

 

1169392934_Screenshot2021-02-07at19_55_13.png.ef80ee62cbb1811f4155afa91571e983.png

 

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

540542601_Screenshot2021-02-14at10_28_25.thumb.png.8e4b0cf342a354e5acd83cf84b5c6c28.png

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?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...