Maeva_Bac Posted February 28, 2022 Share Posted February 28, 2022 Site URL: https://www.maevabac.com/projets Hello, I'd love to make 2 changes in my portfolio project page: https://www.maevabac.com/projets 1. Aligning text on the left and images on the right, so they don't hide the text. And keep the hover feature. 2. Adding a caption to project titles with a smaller font. Can someone tell me how to do these things? Thanks! Link to comment
tuanphan Posted March 3, 2022 Share Posted March 3, 2022 #1. Like this? https://www.loom.com/share/1bb0e40c784647c59057c67c1eca95b7 #2. Add to Design > Custom CSS /* Projects page subtitle */ body#collection-61f2abee615c6449c1254291 { span.portfolio-hover-item-content:after { font-size: 16px; display: block; } a.portfolio-hover-item[href="/projets/etapes"] span:after { content: "etapes sub"; } a.portfolio-hover-item[href="/projets/art-faber"] span:after { content: "art faber sub"; } a.portfolio-hover-item[href="/projets/yazoue"] span:after { content: "yazoue sub"; } a.portfolio-hover-item[href="/projets/hprints"] span:after { content: "hpprints sub"; } a.portfolio-hover-item[href="/projets/celadon"] span:after { content: "celadon sub"; } } 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
jasbrandstudio Posted November 29, 2022 Share Posted November 29, 2022 Hi @tuanphan, are you able to share the solution to #1? I can't identify the class for the image that appears on hover. Link to comment
Beyondspace Posted November 30, 2022 Share Posted November 30, 2022 #1 Do you mean something like this? Bdeatcher and tuanphan 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) 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
cdbb11 Posted October 26, 2023 Share Posted October 26, 2023 Hello, did you find a solution ? I have the exact same problem! Please see here: https://sprout-maracas-928x.squarespace.com/artists, password 1234 The titles aligns to the left, but i would like the photos to appear on the right! Thank you so much Link to comment
tuanphan Posted October 29, 2023 Share Posted October 29, 2023 On 10/27/2023 at 12:17 AM, cdbb11 said: Hello, did you find a solution ? I have the exact same problem! Please see here: https://sprout-maracas-928x.squarespace.com/artists, password 1234 The titles aligns to the left, but i would like the photos to appear on the right! Thank you so much You can add this code to Website Tools (under Not Linked) > Custom CSS @media screen and (min-width:992px) { .portfolio-hover-base { left: 50%; width: 50%; } } 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
cdbb11 Posted October 30, 2023 Share Posted October 30, 2023 On 10/29/2023 at 2:46 AM, tuanphan said: You can add this code to Website Tools (under Not Linked) > Custom CSS @media screen and (min-width:992px) { .portfolio-hover-base { left: 50%; width: 50%; } } Thank you so much! It does help, the image is now showing on the right but it moves depending on where the cursor is. Meaning that if my cursor is at the very end of the item list, half of the image is cropped.... Is there any way to have the image appear on the right, but not move? have a fixed area? Thank you! Link to comment
Tempixel Posted November 1, 2023 Share Posted November 1, 2023 Hi, I unfortunately missed @tuanphan's solution to #1. Does anyone know which selectors to use for text alignment (e.g. align titles on the left of the page) and image alignment with the portfolio hover? Would love to learn them. Thanks heaps Link to comment
tuanphan Posted November 3, 2023 Share Posted November 3, 2023 On 10/30/2023 at 10:59 PM, cdbb11 said: Thank you so much! It does help, the image is now showing on the right but it moves depending on where the cursor is. Meaning that if my cursor is at the very end of the item list, half of the image is cropped.... Is there any way to have the image appear on the right, but not move? have a fixed area? Thank you! You can adjust left value in the code On 11/1/2023 at 1:12 PM, Tempixel said: Hi, I unfortunately missed @tuanphan's solution to #1. Does anyone know which selectors to use for text alignment (e.g. align titles on the left of the page) and image alignment with the portfolio hover? Would love to learn them. Thanks heaps Depends on your site. If you share link to portfolio, we can give the code 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