Jump to content

Different homepage style on mobile

Recommended Posts

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 comment
  • Replies 14
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 1 year later...
On 4/26/2024 at 8:36 PM, itsmarkgregory said:

I'm also looking for a solution to this. I have my portfolio as Hover: Follow Cursor on desktop, but wish to change it to Grid: Simple on mobile. I pasted the code above into the Code Injection - Header section but it did not work

My page is linked below

https://www.markgregory.com.au/stills

Password: Jumpman24

You need to change ID in the code.

Change this line

  if (Static.SQUARESPACE_CONTEXT.collectionId == "5e8a697fd7a6d83f2f1de30e") {

to this

  if (Static.SQUARESPACE_CONTEXT.collectionId == "collection-659e57683ecb28298df83f2c") {

 

On 4/27/2024 at 4:35 PM, jasonp199 said:

Hey, mine is also showing up blank now on mobile version. Code pasted in > code injection > header 

site url: https://orthis.co/portfolio

In the code, change this line

 if (Static.SQUARESPACE_CONTEXT.collectionId == "5e8a697fd7a6d83f2f1de30e") {

to this

 if (Static.SQUARESPACE_CONTEXT.collectionId == "61d62889c0f54465b422fe9e") {

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.