JLBali Posted November 24, 2022 Share Posted November 24, 2022 Hi! I would like my portfolio to use the "alternating side by side blog" appearance with the image on one side and the title of the project on the other. I could not find a way to do that. Can you please help me? Link to comment
Beyondspace Posted November 24, 2022 Share Posted November 24, 2022 21 minutes ago, JLBali said: Hi! I would like my portfolio to use the "alternating side by side blog" appearance with the image on one side and the title of the project on the other. I could not find a way to do that. Can you please help me? Can you share your URL site so I can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Ziggy Posted November 24, 2022 Share Posted November 24, 2022 You're welcome to start with this Custom CSS, it may not work perfectly: .portfolio-grid-basic { grid-template-columns:1fr; } .portfolio-grid-basic .grid-item .grid-image { width:50%; } .tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image { padding-bottom: 50%; } .portfolio-grid-basic .grid-item:nth-child(odd) { flex-direction: row; align-items:center; justify-content: space-between; } .portfolio-grid-basic .grid-item:nth-child(even) { flex-direction: row-reverse; align-items:center; justify-content: space-between; } Let me know when you've added it, and how it looks, and we can try and adjust it. JLBali and tuanphan 2 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
JLBali Posted November 28, 2022 Author Share Posted November 28, 2022 Hi! the url is https://www.justlistedbali.com/ Link to comment
JLBali Posted November 28, 2022 Author Share Posted November 28, 2022 I tried to insert this code in the design css field, but it is not showing the images... could you please help me again? thank you! .portfolio-grid-basic { grid-template-columns:1fr; } .portfolio-grid-basic .grid-item .grid-image { width:50%; } .tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image { padding-bottom: 50%; } .portfolio-grid-basic .grid-item:nth-child(odd) { flex-direction: row; align-items:center; justify-content: space-between; } .portfolio-grid-basic .grid-item:nth-child(even) { flex-direction: row-reverse; align-items:center; justify-content: space-between; } Link to comment
Ziggy Posted November 28, 2022 Share Posted November 28, 2022 What page are you trying to apply this to? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
JLBali Posted November 28, 2022 Author Share Posted November 28, 2022 It is the portfolio page "Bali" - https://www.justlistedbali.com/bali Link to comment
Ziggy Posted November 28, 2022 Share Posted November 28, 2022 It doesn't look like you have thumbnail images for these, I see the code there correctly, but it contains no thumbnail image. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
JLBali Posted November 28, 2022 Author Share Posted November 28, 2022 You are totally right somehow they were taken off when I inserted the code. Now you can see the images. I modified the proportions and now somehow it is not aligned anymore. I was wondering if you could help me make it more similar to the blog on the text side (aligned to the left and with the learn more button). I attach two screenshot Link to comment
Ziggy Posted November 28, 2022 Share Posted November 28, 2022 Try this: .portfolio-grid-basic { grid-template-columns: 1fr; } .portfolio-grid-basic .grid-item .grid-image { width: 50%; } .tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image { padding-bottom: 50%; } .portfolio-grid-basic .grid-item:nth-child(odd) { flex-direction: row; align-items: center; margin-left: 6vw; } .portfolio-grid-basic .grid-item:nth-child(even) { flex-direction: row-reverse; align-items: center; margin-right: 6vw; } Give me a thumbs up if this was helpful! JLBali 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
JLBali Posted November 29, 2022 Author Share Posted November 29, 2022 Not yet there, now the title is too near to the picture and it is too small, I also changed something in you code to adjust spacing. Let me know if it is correct! .portfolio-grid-basic { grid-template-columns: 1fr; } .portfolio-grid-basic .grid-item .grid-image { width: 60%; margin-bottom:10vw; } .tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image { padding-bottom: 50%; } .portfolio-grid-basic .grid-item:nth-child(odd) { flex-direction: row; align-items: center; margin-right: 6vw; } .portfolio-grid-basic .grid-item:nth-child(even) { flex-direction: row-reverse; align-items: center; margin-left: 6vw; } Link to comment
Ziggy Posted November 29, 2022 Share Posted November 29, 2022 To change the position of the text next to the image, change the margin-right: 6vw; and margin-left: 6vw; to higher VW values, maybe start at 10vw and increase or decrease to suit your design. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
JLBali Posted November 30, 2022 Author Share Posted November 30, 2022 No, unfortunately it does not wrok, it just moves the whole column left or right but does not modify the space between text and photo. Link to comment
Ziggy Posted November 30, 2022 Share Posted November 30, 2022 Try this: .portfolio-grid-basic { grid-template-columns: 1fr; } .portfolio-grid-basic .grid-item .grid-image { width: 60%; margin-bottom:10vw; } .tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image { padding-bottom: 50%; } .portfolio-grid-basic .grid-item:nth-child(odd) { flex-direction: row; align-items: center; margin-right: 4vw; .portfolio-text { margin-left:4vw; } } .portfolio-grid-basic .grid-item:nth-child(even) { flex-direction: row-reverse; align-items: center; margin-left: 4vw; .portfolio-text { margin-right:4vw; } } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
JLBali Posted November 30, 2022 Author Share Posted November 30, 2022 Perfect it works! Thank you SO much for your help! Ziggy 1 Link to comment
Ziggy Posted November 30, 2022 Share Posted November 30, 2022 Happy to help! Can you mark my post as the solution and give a thumbs up? Thanks! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
antasz Posted October 18, 2023 Share Posted October 18, 2023 @Ziggy, can you help me also, please! I tried to apply your code to my case, but failed. I want to display my blog posts pulled in the summary block with 'alternating side by side' design. Here, on the Home page, is my summary block, under 'Legutóbbi projektjeink': https://broccoli-kumquat-bs8a.squarespace.com/ (pass: atnif) And I want to give it the same look as the blog page here: https://broccoli-kumquat-bs8a.squarespace.com/hu/projektek Can you help me, please? Thanks in advance Link to comment
Ziggy Posted October 18, 2023 Share Posted October 18, 2023 @antasz The code I provided was for a portfolio page not a summary block. It's probably possible to re-use the code for .sqs-block-summary-v2 .summary-item. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
antasz Posted October 18, 2023 Share Posted October 18, 2023 Yes, I understand the difference. I tried to modify it while looking at my summary block in the browser. Link to comment
miguelrato Posted January 23 Share Posted January 23 Hi @Ziggy is it possible to have the same layout but with 16:9 on the aspect ratio of the images, and the text to be under the image instead? Thanks! Link to comment
tuanphan Posted January 28 Share Posted January 28 @miguelrato You can choose Portfolio Grid Simple with this CSS code /* portfolio 16:9 */ .grid-image { padding-bottom: 56.25% !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
miguelrato Posted January 30 Share Posted January 30 Thanks for replying @tuanphan. What I'm looking for is something like this: Link to comment
tuanphan Posted February 1 Share Posted February 1 On 1/30/2024 at 9:43 PM, miguelrato said: Thanks for replying @tuanphan. What I'm looking for is something like this: Can you share link to page? 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
miguelrato Posted February 1 Share Posted February 1 Thanks @tuanphan. Here's the site: http://bassoon-oval-dg9e.squarespace.com/ Pass: steelworks Link to comment
tuanphan Posted February 4 Share Posted February 4 On 2/1/2024 at 6:04 PM, miguelrato said: Thanks @tuanphan. Here's the site: http://bassoon-oval-dg9e.squarespace.com/ Pass: steelworks Do this for Projects Page? https://bassoon-oval-dg9e.squarespace.com/projects 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment