casafloralia Posted April 5, 2021 Share Posted April 5, 2021 Site URL: https://casafloraliaa.squarespace.com ps: studio hi everyone, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile with text alignment to the center. Is that possible? Beyondspace 1 Link to comment
Beyondspace Posted April 7, 2021 Share Posted April 7, 2021 On 4/6/2021 at 2:30 AM, casafloralia said: Site URL: https://casafloraliaa.squarespace.com ps: studio hi everyone, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile with text alignment to the center. Is that possible? I don't think it possible, would require extensive custom code for this Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 On 4/6/2021 at 2:30 AM, casafloralia said: Site URL: https://casafloraliaa.squarespace.com ps: studio hi everyone, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile with text alignment to the center. Is that possible? Hi. Add to Settings . Advanced > Code injection > Header <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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
karo Posted April 12, 2021 Share Posted April 12, 2021 11 hours ago, tuanphan said: Hi. Add to Settings . Advanced > Code injection > Header <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> Hi there, thanks for posting this. I just tried the same code for my website but it seems not to work... my website: https://pufferfish-lion-mkrm.squarespace.com/ password: sqr Any idea what's the trick? @tuanphan Link to comment
tuanphan Posted April 14, 2021 Share Posted April 14, 2021 On 4/13/2021 at 1:47 AM, karo said: Hi there, thanks for posting this. I just tried the same code for my website but it seems not to work... my website: https://pufferfish-lion-mkrm.squarespace.com/ password: sqr Any idea what's the trick? @tuanphan You want move title under square border on //workwork page? karo 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment