Portfolio layouts

Hello,

I am trying to show one Portfolio layout on Desktop and another on Mobile. On Desktop, the portfolio layout i want is the grid overlay On Mobile, I need to show the simple grid portfolio thumbnails with titles. Can i do this?

@mdegortari You can achieve this with some custom coding. The process involves creating two separate portfolio layouts: one for desktop and another for mobile. Then, using custom code, we can make sure that the mobile layout is displayed exclusively on mobile devices. If you can create these two portfolio layouts and share your website's URL, I can provide you with the necessary code. Thanks!

@Lesum do you know a way to duplicate the actual portfolio that i have right now? or do I have to upload every project all over again??

here is the site
https://www.gomezpadilladesign.com/

pass- maye

On 9/25/2023 at 10:42 PM, Lesum said:

@mdegortari You can achieve this with some custom coding. The process involves creating two separate portfolio layouts: one for desktop and another for mobile. Then, using custom code, we can make sure that the mobile layout is displayed exclusively on mobile devices. If you can create these two portfolio layouts and share your website's URL, I can provide you with the necessary code. Thanks!

This won't work as you can only have one portfolio section per page.

@tuanphan has the right idea.

@tuanphan this worked perfectly thanks! but for some reason on mobile the special characters of the font changes to another font, do you have a solution for this?

On 9/28/2023 at 1:13 AM, mdegortari said:

@tuanphan this worked perfectly thanks! but for some reason on mobile the special characters of the font changes to another font, do you have a solution for this?

Hi,

Can you take a screenshot of problem?

yes @tuanphan here is the screenshot, see the ñ, Á, ó??

Did you figure it out? It already fine to me

@tuanphan Would you mind also giving me a hand with the same/similar issue please... I'm wanting to show the portfolio "hover" option on desktop, and the "grid" option on mobile. When I go to inject the code you have suggested above, nothing seems to be happening... I'm adding this in Utilities > website tools > custom CSS - am I just simply adding this in the wrong place?
 

On 12/29/2023 at 10:51 PM, EmilyCary said:

@tuanphan Would you mind also giving me a hand with the same/similar issue please... I'm wanting to show the portfolio "hover" option on desktop, and the "grid" option on mobile. When I go to inject the code you have suggested above, nothing seems to be happening... I'm adding this in Utilities > website tools > custom CSS - am I just simply adding this in the wrong place?
 

This code for Grid Overlay only, it won't work with your Hover layout.

With your layout, CSS can't solve, it requires JavaScript code and each site will need a different code.

Can you share link to your site?

Ahh I see. @tuanphan No worries, my site is https://www.emilycarydesign.co.uk/

Thanks so much! 

Try this code to Website Tools (under Not Linked) > Code Injection > Footer

<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="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
    window.onload = function () {
        if (Static.SQUARESPACE_CONTEXT.collectionId == "6543e9a51c290f167362e3bf"") {
            $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>

Hi @tuanphan Thanks so much for this, 
Unfortunately this wipes out the portfolio from the mobile screen size (I've attached a screen shot)

Many Thanks

On 1/4/2024 at 5:48 PM, EmilyCary said:

Hi @tuanphan Thanks so much for this, 
Unfortunately this wipes out the portfolio from the mobile screen size (I've attached a screen shot)

Many Thanks

ah, the code has a duplicate symbol, you can remove one here

@tuanphan This has worked! You're a genius, thanks so much 🙂

@tuanphan So sorry, two more things on me with this. 

1. The header on mobile is blocking the first image slightly, is it possible to edit this code please so that this section falls below the header (screenshot attached)

2. Also, if I change the colour of the section, the mobile content disappears. Is it posssible to set this with the colour scheme "Light 1" please.

Thank you so much! 

 

#1. Add this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
body.homepage article section:first-child {
    padding-top: 100px !important;
}
}

#2. Mobile content, you mean logo + burger icon?

Thank you @tuanphan. 

No , the whole of the mobile layout of the portfolio disappears when I change the colour scheme! 

@tuanphan I've actually also noticed that the wrong headers are on mobile too! (see attached)

This is the correct image for "direction" but this heading is going under another section on the homescreen t