Jump to content

Portfolio layouts

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 18
  • Views 3.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

You can use Overlay layout on desktop, then add this code to Website > Website Tools > Custom CSS to change to grid (title under thumbnail) on mobile

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}

 

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

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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

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 months later...

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

Screenshot 2023-12-29 at 15.49.20.png

Screenshot 2023-12-29 at 15.49.30.png

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

Screenshot 2023-12-29 at 15.49.20.png

Screenshot 2023-12-29 at 15.49.30.png

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?

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

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>

 

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

Screenshot 2024-01-04 at 10.46.56.png

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

image.thumb.png.aa6c47b1ad0acddd37d3c81a825260f9.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
  • 3 weeks later...

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

 

Screenshot 2024-01-26 at 13.18.48.png

Link to comment

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

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.