paraselene Posted September 6, 2022 Share Posted September 6, 2022 Site URL: https://fox-chihuahua-df3j.squarespace.com/ Hi, does anyone know how to change the font size and colour when putting subheadings in a portfolio block? I followed another tutorial to put subheadings in but I dont know how to customise it further. What I have is on the left, and what I want is on the right. Thanks! Link to comment
tuanphan Posted September 8, 2022 Share Posted September 8, 2022 Add to Design > Custom CSS h3.portfolio-title:after { font-size: 18px; color: red; } 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
paraselene Posted September 9, 2022 Author Share Posted September 9, 2022 Hi! I tried it out and it looks like this: It's made both rows pink, but i only want the 'UX/UI design' to be pink. Heres the code I currently have: h3.portfolio-title:after { font-size: 16px; color: black; display: block; white-space: pre-wrap; } h3.portfolio-title:after { font-size: 18px; color: #cf347f; } a.grid-item[href="/projects/hatch"] h3:after { content: "UX/UI design \A Improving productivity through simplified task management"; } a.grid-item[href="/projects/tumblrmobile"] h3:after { content: "UX/UI design \A Faciliating content creation, retrieval, and discovery"; } Link to comment
tuanphan Posted September 10, 2022 Share Posted September 10, 2022 You mean You want title appears in 3 line first is black second is pink third is black Is this right? 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
paraselene Posted September 10, 2022 Author Share Posted September 10, 2022 4 hours ago, tuanphan said: You mean You want title appears in 3 line first is black second is pink third is black Is this right? Yes! If it's possible, the pink line has a smaller font size than the black lines 🙂 Link to comment
paraselene Posted September 12, 2022 Author Share Posted September 12, 2022 sorry, is there any update to this? i'm in a bit of a rush 😞 Link to comment
tuanphan Posted September 17, 2022 Share Posted September 17, 2022 On 9/12/2022 at 3:31 PM, paraselene said: sorry, is there any update to this? i'm in a bit of a rush 😞 Sorry. Just had some travelling day. Do you use Personal or Business Plan? Each plan will have a different solution If you use a Business Plan or higher, follow these steps Edit title to this format: Hatch <em>UX/UI design</em><em>Improving productivity through simplified task management</em> Next, I will give the code to change color This way, it will appear in both the Pagination Title, Browser Tab, and possibly Google Search Result. If you use Personal Plan, let me know, I think I will give another approach using :after, :before, like the way you added small text 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
paraselene Posted September 17, 2022 Author Share Posted September 17, 2022 6 hours ago, tuanphan said: Do you use Personal or Business Plan? No worries about travelling, i'm glad you're helping me out in the first place 🙂 I'm on a personal plan! Link to comment
tuanphan Posted September 18, 2022 Share Posted September 18, 2022 Try adding this CSS /* first project */ a.grid-item[href="/projects/hatch"] { h3:before { content: "UX/UI Design"; display: block; position: absolute; top: 30px; color: pink; font-size: 15px; white-space: nowrap; } h3:after { content: "Improving productivity through simplified task management"; position: absolute; top: 60px; width: 100%; white-space: nowrap; } h3.portfolio-title { position: absolute; top: 0; }} h3.portfolio-title:after { font-family: aktiv-grotesk; font-size: 16px; line-height: 1.8em; color: #000; display: block; white-space: pre-wrap; } 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
paraselene Posted September 20, 2022 Author Share Posted September 20, 2022 On 9/18/2022 at 5:47 PM, tuanphan said: Try adding this CSS /* first project */ a.grid-item[href="/projects/hatch"] { h3:before { content: "UX/UI Design"; display: block; position: absolute; top: 30px; color: pink; font-size: 15px; white-space: nowrap; } h3:after { content: "Improving productivity through simplified task management"; position: absolute; top: 60px; width: 100%; white-space: nowrap; } h3.portfolio-title { position: absolute; top: 0; }} h3.portfolio-title:after { font-family: aktiv-grotesk; font-size: 16px; line-height: 1.8em; color: #000; display: block; white-space: pre-wrap; } the code works! except on mobile view the spacing is incorrect. do you know how to fix the spacing on mobile? Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 14 hours ago, paraselene said: the code works! except on mobile view the spacing is incorrect. do you know how to fix the spacing on mobile? Try this new code a.grid-item[href="/projects/hatch"] { h3:before { content: "UX/UI Design"; display: block; position: absolute; top: 30px; color: pink; font-size: 15px; white-space: nowrap; } h3:after { content: "Improving productivity through simplified task management"; position: absolute; top: 60px; width: 100%; white-space: nowrap; } h3.portfolio-title { position: absolute; top: 0; }} h3.portfolio-title:after { font-family: aktiv-grotesk; font-size: 16px; line-height: 1.8em; color: #000; display: block; white-space: pre-wrap; } @media screen and (max-width:767px) { div#gridThumbs { grid-row-gap: 150px; } } 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
paraselene Posted September 21, 2022 Author Share Posted September 21, 2022 13 hours ago, tuanphan said: Try this new code super close! it's nearly correct except the text isnt wrapping properly underneath the portfolio image so it's overlapping other text or going off the screen Link to comment
tuanphan Posted September 23, 2022 Share Posted September 23, 2022 Try this a.grid-item[href="/projects/hatch"] { h3:before { content: "UX/UI Design"; display: block; position: absolute; top: 30px; color: pink; font-size: 15px; white-space: nowrap !important; } h3:after { content: "Improving productivity through simplified task management"; position: absolute; top: 60px; width: 100%; white-space: nowrap; } h3.portfolio-title { position: absolute; top: 0; }} h3.portfolio-title:after { font-family: aktiv-grotesk; font-size: 16px; line-height: 1.8em; color: #000; display: block; white-space: pre-wrap; } @media screen and (max-width:767px) { div#gridThumbs { grid-row-gap: 150px; } h3:after { white-space: initial !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
paraselene Posted September 25, 2022 Author Share Posted September 25, 2022 On 9/23/2022 at 5:53 PM, tuanphan said: Try this a.grid-item[href="/projects/hatch"] { h3:before { content: "UX/UI Design"; display: block; position: absolute; top: 30px; color: pink; font-size: 15px; white-space: nowrap !important; } h3:after { content: "Improving productivity through simplified task management"; position: absolute; top: 60px; width: 100%; white-space: nowrap; } h3.portfolio-title { position: absolute; top: 0; }} h3.portfolio-title:after { font-family: aktiv-grotesk; font-size: 16px; line-height: 1.8em; color: #000; display: block; white-space: pre-wrap; } @media screen and (max-width:767px) { div#gridThumbs { grid-row-gap: 150px; } h3:after { white-space: initial !Important; } } sorry, it doesn't really work 😕 it jumps to the next line too quickly 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