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

Search the Community

Showing results for tags 'portfolio'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. I've run into a bit of an issue with hiding individual collection pages in Squarespace 7.1. Normally, by clicking on the settings for a page, you are able to enable or disable that page. However with the new system of "Portfolio Collections" that page disable option does not exist for individual portfolio project pages. I may be mistaken, but as far as I can tell, there is no way to hide these pages (screenshots attached for reference). This is incredibly troubling as you cannot create drafts of projects, nor if you are duplicating other projects, they will be live with duplicate content until you fix it. I was thinking possibly that you could move collection pages to other collection pages(in the way you can move products from shop to shop), so in essence you could pre-build the portfolio page on a hidden portfolio collection and move it to the live portfolio collection, but there doesn't seem to be a way to do this either. Any advice on how I could make hidden pages in the existing Portfolio Collection system or is this just a fault in the new version?
  2. Site URL: https://buffalo-carrot-5s84.squarespace.com/design-work I am trying to hide the last 2 projects in my portfolio grid that I still want to appear when using the pagination at the bottom of each portfolio item. I currently have them as linked images much larger in a section above the grid, highlighting these two projects. I have tried to hide the grid item with css but I am unable to select the individual items. This is what I have so far but it is hiding the whole portfolio. Site: https://buffalo-carrot-5s84.squarespace.com/design-work Password: saku #gridThumbs { .grid-item {display:none} }
  3. Hi, I have a portfolio slide show gallery which is cropping the images within it. Is there any custom CSS I can insert to remove the cropping? any ideas if it is possible to get rid of it?!
  4. Site URL: https://www.johanrosen.com/ Hello! I have the same problem like many here, my portfolio on mobile stacks as one giant row. I would like to have 3, or potentially two images stacked side by side on mobile to make it look better. I used a portfolio page as my home page and added sections to make it a one page website with menu that is anchor-linked to the different sections on that page. Could anyone here help me please? Cheers, Johan
  5. Hi, how do I add a code to a portfolio layout page for the grid images to be black and white and for each to appear in colour only when hovered over after 2 seconds or so? I have tried adding codes to the specific pages advanced section but it just appears as text in the header and nothing changes. Please help!
  6. I'm trying to create multiple portfolio "Grid: Overlay" project style pages, but want to have different gallery image sizes on each page (i.e. 16:9 aspect and 4 rows on home page, 1:1 and 2 rows on a different page). Whenever I change the settings for one page though, it changes the project gallery settings across all pages. I don't know a workaround for this, and am trying to avoid custom CSS. Any ideas what I can do to achieve this?
  7. I would like my portfolio collection page thumbnails that click through to the specific project page to be video vs an image. Is this possible?? Can’t seem to find ANYTHING about this! Any advice??
  8. Site URL: https://www.alxhtchr.com/vault-2 I've created a portfolio grid gallery and worked the code so that it has 1 column without left or right padding; however, I've been trying for hours to find code that will allow the row to be cropped vertically to 50% of the page (if I were to have 2 rows and header hidden you could see their entirety). I want the aspect ratio to be variable so that as the browser window size changes, so does the crop on the photo to remain at 50% of the vertical height. The code I attached in the image has not successfully worked in limiting the row height. I'm looking to imitate this page https://www.shortstache.com/professional Here is my page https://www.alxhtchr.com/vault-2 Would appreciate any help I can get, thanks!
  9. Site URL: https://www.cindyho.design/ Hi, Square Space doesn't allow us to switch templates but I'd like my portfolio page to display my projects in one column rather than currently three. I can change this on the Design section but can only go down to minimum of 2 column layout. I tried pasting this code based on another user's question, but it didn't work: div#gridThumbs { grid-template-columns: repeat(1,minmax(0,1fr)) !important; padding-left: 10vw; padding-right: 10vw; } Site URL: cindyho.design Password: 123
  10. Site URL: https://armadillo-apple-za9h.squarespace.com/ Hi, I was using a Portfolio as the menu options for a home page for a client — however, we can't change the URL slugs on them and it is super frustrating. So I thought I'd just create a new menu, the normal way, but I'd still like to add the hover text if possible. Is this something that can be relatively easily achieved? Here is the portfolio homepage — https://armadillo-apple-za9h.squarespace.com/ — password odc2021 Here is my tester homepage that I'd like to add the hover — https://armadillo-apple-za9h.squarespace.com/home-test (Yes, the menu options are in a different order, just threw them on there to play with) Thanks in advance!
  11. Site URL: https://www.arielokin.com/test-page-reverse-hover Hi! I'm trying to build out a project landing page using the portfolio (Grid Overlay) and want to customize each project's hover with a unique image. I know how to overlay an image, but not a photo that is unique to each product since there are no block IDs associated to each project. Is it possible to do so? For additional context, it would essentially be reversing this image and hover set up minus a few decorative details. Thank you!
  12. Site URL: https://www.marina-art-box.me Hello all I am a Graphic designer. I decided to create my portfolio so I will engage more potential clients. As this is my first attempt I would like to ask you for your feedback. This is the link of my portfolio. https://www.marina-art-box.me All your comments are welcome. Thanks for your time. Marina
  13. Site URL: https://www.copperhead.media/portfolio Hi everyone, I was glad to see there was a dedicated "project" feature on 7.1 to best display my portfolio projects, but I am finding limits in potentially being able to filter projects by category or tags. For example, I would like to be able to have a category menu bar above my projects where you can select certain project types, such as "graphic design" or "portrait photography" to sort and display the relevant items. Would this be difficult to work around? or to custom code? or perhaps I'm just missing something. Thanks!
  14. Site URL: https://mused-interiors.squarespace.com/ I need help with a specific feature on Squarespace. My client is an interior design studio, and wants all of her projects as large links on display, just like the Portfolio page on the Background > Hover mode. This solution would usually be perfect, but the client also wants her website to be a mostly long scrolling page, so she doesn’t want the project links going to another page, but rather a pop up/ lightbox. I bought Lightbox Anything plugin from SQSP Themes to achieve any link going to a lightbox. I’ve uploaded the js and css files and tested the code and it does indeed work, but I haven’t figured out how to make it work with the project link opening to a Lightbox. So I need either of the following: Change background image on hover for text link I created a blank page with each project text link that opens to the lightbox pop-up and it works perfectly. Since this was a blank page and NOT a portfolio page though, it doesn’t change the background image when I hover over each project. For this instance, I need to change the background hovers. OR Change coding to have the portfolio links open the lightbox pop up I used a portfolio page and created projects for each like normal. However, I’m trying to redirect each project link away from a separate page and point it towards the new pop up. For some reason, the code isn’t working. Website Login Info: Website: https://mused-interiors.squarespace.com/ Password: mused If anyone could help me, I would really appreciate it!
  15. Site URL: https://www.staceyscribbling.com/projects I have a portfolio page on my site that will not show unless I scroll down 4 or 5 times...only then will the page start populating. There isn't anything more different about the images on the page than any other page-blog, shop, etc. It just won't load the image covers. I am not sure how to fix it. I feel like when someone goes to the page, they will see nothing and not really think I have anything there. Does anyone here have any ideas to fix it? Thanks in advance.
  16. Site URL: https://pierrekaram.com/ Hey everyone, I need help on my website: if you click on it, you'll notice that, in mobile view, some texts are not perfectly centered. For example "Far Away Pandemic", or to a lesser extent Monochrome Paris. Could anyone help me with that? Thanks in advance The password is pierrekaram00
  17. Site URL: https://pierrekaram.com/ Hello everyone, I need some help with my website. I would like to disable the background hover effect only for the mobile view on my website. (so prevent the background image changing when you simply touch it with your finger). Could someone help me with that? Thanks for your help The password is pierrekaram00
  18. Site URL: https://scaacquisition2020.com pw:1234 This is making me nuts. I need to remove the image overlay that appears when you hover over the portfolio links on my homepage. There is no setting within the design color editor and I've set all "image overlays" to transparent just to be safe but still can't figure out what the CSS should be to remove this annoying default setting. EDIT: Here is the correct CSS for anyone interested .portfolio-hover-bg-overlay { display: none }
  19. Site URL: https://www.leafsilver.com/ Hello! My name is Leaf, I'm an artist and designer working as a freelance website designer splitting time between Vermont and Chicago. I am interested in growing my client base and as a first step towards that, my website. I just attended Sophia Ojha's webinar on the Client on-boarding process, which was illuminating! I have a lot more to work on now :)) I just published an update to my personal website to include my freelance services as a way for clients to learn more, find my work and contact me. I'm still working on fleshing out client case studies for my portfolio but in the mean time would really appreciate any feedback or suggestions on my site's layout and information architecture from y'all. I'm very much still in the process of tweaking and It would be helpful to have some thoughts to guide my process going forward. Thanks!
  20. Some code for Portfolio Page - Grid Simple in 7.1. All code: Add to Design > Custom CSS <style> <script> you need to add to Page Header or Code Injection #1. Change Overlay Color /* Show dark overlay on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); /* chage overlay color here */ transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } #2. Add Subtitle First, find subpage [url slug] Next, use this CSS /* Add subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01"; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 01"; } Repeat for other sub pages #3. Add Multi Subtitle /* Multi subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; white-space: pre-wrap; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01 \A second subtitle \A third subtitle "; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 02 \A second subtitle \A third subtitle 2"; } #4. Change to 5 items/row (Desktop) /* Portfolio 5 columns */ @media screen and (min-width:992px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code. #5. Change to 2 items/row (Mobile) /* Mobile 2 columns */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code. #6. Add “new” badge to next to title /* new badge */ a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "New"; position: absolute; top: -5px; font-size: 14px; background-color: red; color: white; line-height: 20px; padding: 2px; margin-left: 10px; } #7. Add an icon next to title a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2020/03/09/17/51/narcis-4916584__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 50px; height: 50px; display: block; float: right; } Replace with [URL Slug] (see screenshot in first code) #8. Zoom in image on hover /* Zoom in image on hover */ .grid-image img { transition: all 0.3s; } .grid-image-inner-wrapper { overflow: hidden; } a.grid-item:hover img { transform: scale(1.3); transition: all 0.3s; } #9. Add “view” text when hover image /* Add view text on hover image */ .grid-image:before { content: "view"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; } #10. Show Overlay + Title over image when hover (Desktop only) /* show overlay title on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } .grid-image:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; } .portfolio-text { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999999999; width: 100%; text-align: center; transition: all 0.3s; opacity: 0; } a.grid-item { position: relative; } a.grid-item:hover .portfolio-text { opacity: 1; } .portfolio-text { margin: 0 !important; } h3.portfolio-title { margin: 0 !important; } #11. Change Aspect ratio on sepcific portfolio page First, find [page id] Next, use this CSS /* aspect ratio 2:3 */ body#collection-622f619622029655b91503a8 .grid-image { padding-bottom: 150% !important; } 2:3 = (100 x 3)/2 = 150% #12. Remove Pagination /* remove portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { display: none; } #13. Remove Pagination Title Only /* remove pagination title */ .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { display: none; } #14. Remove Pagination Arrows Only /* remove pagination arrows */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke { display: none; } #15. Replace Pagination Title with text Prev/Next /* Pagination title */ [data-collection-type*="portfolio"] { h2.item-pagination-title { display: none; } .item-pagination-prev-next { display: block !important; }} #16. Repalce Pagination Arrow with custom icon /* Custom pagination arrow icon */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke svg { display: none; } [data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } [data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } #17. Add all projects under Pagination Add to Project Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<section class="item-pagination item-pagination--prev-next under-pagination"><div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"><p><a href="/work" target="_blank">All</a> / <a href="/work/meccaandmedina">Mecca &amp; Medina</a> / <a href="/work/street">Street</a> / <a href="/work/humansofstlouis">Humans of St. Louis</a> / <a href="/work/charis">CHARIS</a></p></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script> <style> section.under-pagination { justify-content: center; padding-top: 10px; padding-bottom: 10px; } </style> #18. Add Last Project/First Project on First Page/Last Page Pagination Add to Page Header or Code Injection Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio/12" class="item-pagination-link item-pagination-link--prev"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Previous</div><div class="item-pagination-prev-next">- PREV</div><h2 class="item-pagination-title">12 | PRIVATE EVENTS</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> #19. Add Button to Pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> <style> /* Portfolio back to button */ a.portfolio-backto .item-pagination-title { background-color: black; color: white !important; padding: 10px; } </style> #20. Add “Back to all projects” under pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script> #21. Move Pagination from bottom to top Add to Page Header <style> main#page { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-top: 100px; } section.item-pagination.item-pagination--prev-next { padding-top: 0; padding-bottom: 5px; } .view-item .item-pagination[data-collection-type^="portfolio"] section:first-child { padding-top: 10px !important; } </style> #22.Change Pagination Title size (mobile) /* pagination title mobile */ @media screen and (max-width:767px) { .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { font-size: 14px; } } #23. Change Pagination Color on hover /* pagination hover */ .item-pagination[data-collection-type^="portfolio"] h2:hover { color: #f1f; } .item-pagination[data-collection-type^="portfolio"] .icon:hover svg { stroke: #f1f; } -- Checked by @tuanphan
  21. Site URL: https://yasutokimura.com/portfolio-2 Hi, On my portfolio website I applied “after hover” effect on few of the photos. This function works perfectly on desktop, and the preview of mobile website looks perfect too. For some reason when it comes to the actual mobile screen, the after hover effect doesn’t work. I’m wondering how to make it work, and I would appreciate your advice. Regards Yasuto
  22. Site URL: https://www.rotaterecordings.com/portfolio-3 Hi, I am trying to reduce the padding on my portfolio page, which I have at the moment using this code: /* PORTFOLIO HEIGHT */ @media screen and (min-width:992px) { .portfolio-hover { min-height: unset !important; height: 50vh !important; } .portfolio-hover-display { height: 100% !important; min-height: unset !important; } [data-section-id="627dbc08e4e4413a0d2d21f2"] { height: 50vh !important; }} The only issue is, it then effects the images on hover, where they are not placed on the words, namely; 'New Records', 'All records', 'Subscriptions', 'Bargain Bin'. Does anyone know how I can fix this? https://www.rotaterecordings.com/portfolio-3 Thanks in advance.
  23. Site URL: https://www.thelibertyproject.org/-portfolio Hey! In the link provided, I would like to: 1. Align the titles to the left side of the page 2. Extend the horizontal line under each title across the width of the page (with the existing padding) 3. Change the fixed position of the image on hover to the right side of the page 4. Add a border radius to the image on hover so it has rounded corners. Thanks in advance for all your help, this community has been a game changer!
  24. Site URL: https://ashtongriffin.com/ Hi, I am trying to figure out how to create a dropdown menu in my portfolio that list each individual project in my portfolio. So when I hover over "Creative Campaigns" I'd like to see the title of each project in my portfolio folder. Any ideas welcome?
  25. Site URL: https://hannahesweet.com/ Hello! On my website, I have a portfolio section at the bottom of my page. At the moment, I have all pages hidden using custom CSS. However, there is still a blank space where the section is at the bottom. How do I hide this section so there's no blank space at the bottom of my page? Thanks in advance!
  • Create New...