DariusBo Posted August 27, 2021 Share Posted August 27, 2021 (edited) Site URL: https://wolverine-lime-s87k.squarespace.com/ The problem with grid-overlay is that you basically never see overlay on touch device - i thought maybe its possible to add a css code that enables the project title underneath the image like a regular grid-simple layout? Password: test Thanks a lot Edited August 27, 2021 by DariusBo Link to comment
tuanphan Posted August 30, 2021 Share Posted August 30, 2021 On 8/27/2021 at 8:52 PM, DariusBo said: Site URL: https://wolverine-lime-s87k.squarespace.com/ The problem with grid-overlay is that you basically never see overlay on touch device - i thought maybe its possible to add a css code that enables the project title underneath the image like a regular grid-simple layout? Password: test Thanks a lot Hi, You can set overlay on desktop, title under image on mobile. Can you share link to page where you added grid? I don't see on homepage 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
DariusBo Posted August 30, 2021 Author Share Posted August 30, 2021 3 hours ago, tuanphan said: Hi, You can set overlay on desktop, title under image on mobile. Can you share link to page where you added grid? I don't see on homepage https://wolverine-lime-s87k.squarespace.com/residential is it possible to do without code? Link to comment
Solution tuanphan Posted August 31, 2021 Solution Share Posted August 31, 2021 15 hours ago, DariusBo said: https://wolverine-lime-s87k.squarespace.com/residential is it possible to do without code? Need to custom code. All plans support code Add to Design > Custom CSS /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !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
DariusBo Posted August 31, 2021 Author Share Posted August 31, 2021 3 hours ago, tuanphan said: Need to custom code. All plans support code Add to Design > Custom CSS /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } } amazing thank you! Link to comment
DariusBo Posted August 31, 2021 Author Share Posted August 31, 2021 (edited) 5 hours ago, tuanphan said: Need to custom code. All plans support code Add to Design > Custom CSS /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } } How do i change the font size of these titles in mobile only? it seems like its using heading 3 but the codes i found in the internet does not do much. Thanks Edited August 31, 2021 by DariusBo Link to comment
tuanphan Posted September 1, 2021 Share Posted September 1, 2021 23 hours ago, DariusBo said: How do i change the font size of these titles in mobile only? it seems like its using heading 3 but the codes i found in the internet does not do much. Thanks try this /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; font-size: 12px !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
NGO2045 Posted October 2, 2021 Share Posted October 2, 2021 On 9/1/2021 at 12:13 PM, tuanphan said: try this /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; font-size: 12px !important; } } I tried this for changing the font-size. But It didn't work for me. Do you know why? 🙂 Link to comment
tuanphan Posted October 2, 2021 Share Posted October 2, 2021 8 minutes ago, NGO2045 said: Try this new code /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } .portfolio-text h3 { font-size: 12px !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
NGO2045 Posted October 2, 2021 Share Posted October 2, 2021 (edited) 5 hours ago, tuanphan said: Try this new code /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } .portfolio-text h3 { font-size: 12px !important; } } Thanks a lot!! It worked fine! But I'm also using another code for the portfolio grid text. So I have two text row. One for the name of the project and another one which explains the project. Like this: Project name Description Adding the new code just changes the project name. Is it possible to also change the description text (only in the mobile version, just like project name text) This is the code I use for it two rows in portfolio grid: Name of the project <span>Logotyp</span> .portfolio-text h3 span { display: block !important; color: #8f8f8f; font-family: Poppins !important; font-size: 18px !important; font-weight: 100 !important; } Edited October 2, 2021 by NGO2045 Link to comment
tuanphan Posted October 2, 2021 Share Posted October 2, 2021 6 hours ago, NGO2045 said: Thanks a lot!! It worked fine! But I'm also using another code for the portfolio grid text. So I have two text row. One for the name of the project and another one which explains the project. Like this: Project name Description Adding the new code just changes the project name. Is it possible to also change the description text (only in the mobile version, just like project name text) This is the code I use for it two rows in portfolio grid: Name of the project <span>Logotyp</span> .portfolio-text h3 span { display: block !important; color: #8f8f8f; font-family: Poppins !important; font-size: 18px !important; font-weight: 100 !important; } Use this new code Quote /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(2,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } .portfolio-text h3 { font-size: 20px !important; } .portfolio-text h3 span { font-size: 30px !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
NGO2045 Posted October 2, 2021 Share Posted October 2, 2021 10 minutes ago, tuanphan said: Use this new code wow! Thank you so much! Link to comment
Emmapartridge Posted November 20, 2022 Share Posted November 20, 2022 Hi, i am also trying to organise the portfolio grid overlay text on two lines. First line 12pt, second line 9pt. Your post is the closest I have got but still doesn't work. I've been trying for hours now Can you help please. www.emmapartridge.co.uk Link to comment
tuanphan Posted November 23, 2022 Share Posted November 23, 2022 On 11/21/2022 at 2:30 AM, Emmapartridge said: Hi, i am also trying to organise the portfolio grid overlay text on two lines. First line 12pt, second line 9pt. Your post is the closest I have got but still doesn't work. I've been trying for hours now Can you help please. www.emmapartridge.co.uk See #2 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
Emmapartridge Posted November 23, 2022 Share Posted November 23, 2022 (edited) Hello Thank you answering but what I needed wasn't there. I want the overlay titles on the portfolio home page images to be on two lines and aligned left I want the text white, overlay black I want the top line text bigger than the bottom. Thanks Edited November 23, 2022 by Emmapartridge Link to comment
tuanphan Posted November 25, 2022 Share Posted November 25, 2022 On 11/23/2022 at 6:46 PM, Emmapartridge said: Hello Thank you answering but what I needed wasn't there. I want the overlay titles on the portfolio home page images to be on two lines and aligned left I want the text white, overlay black I want the top line text bigger than the bottom. Thanks You can use that code to add 2 lines, then we can adjust to make text float to left + change text style + add overlay 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