Mae2119 Posted February 15, 2023 Share Posted February 15, 2023 (edited) Hi, I'm trying to set up my portfolio page so that it shows the featured images of the projects clearly, and then, after hovering, overlays with an opaque layer and the project title. It works perfectly in the desktop version, but on the mobile version there is no "hovering", so no opacity and no title; it just clicks straight through to the project. I need the title to show, mainly to credit the photographer, and so I've had to switch it round so that the featured images are opaque with the title to start, and then clear after hovering; Wedding Flowers — The Wild Bunch Wedding Flowers, Ireland But I'm not happy with it; I'd like the page to open full of clear bright images, not dull overlaid ones! I'd appreciate any ideas! Thank you 🙂 Edited February 15, 2023 by Mae2119 Link to comment
tuanphan Posted February 17, 2023 Share Posted February 17, 2023 Hi, You mean remove overlay color on mobile or? Or how about force title under image on mobile only? Mae2119 1 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
Mae2119 Posted February 22, 2023 Author Share Posted February 22, 2023 On 2/17/2023 at 8:53 AM, tuanphan said: Hi, You mean remove overlay color on mobile or? Or how about force title under image on mobile only? Thanks for replying Tuanphan and sorry for my delay. Yes I'd like to start out with no overlay, just the clear photo, and then get the overlay (I need it to be able to see the title) when you hover. It's fine on desktop but on mobile you don't hover I think? So there's no overlay and no title, you just click on the image and it clicks through to the portfolio. (when I'm editing from the laptop, it looks like it works on the mobile version, but in real life, from my phone, it doesn't) Yes If I can't figure anything out I'll have to change it to "grid simple" with the title underneath, I just much prefer the look of the "grid overlay" Thanks very much Link to comment
Solution tuanphan Posted February 23, 2023 Solution Share Posted February 23, 2023 On 2/22/2023 at 5:38 PM, Mae2119 said: Thanks for replying Tuanphan and sorry for my delay. Yes I'd like to start out with no overlay, just the clear photo, and then get the overlay (I need it to be able to see the title) when you hover. It's fine on desktop but on mobile you don't hover I think? So there's no overlay and no title, you just click on the image and it clicks through to the portfolio. (when I'm editing from the laptop, it looks like it works on the mobile version, but in real life, from my phone, it doesn't) Yes If I can't figure anything out I'll have to change it to "grid simple" with the title underneath, I just much prefer the look of the "grid overlay" Thanks very much Add to Design > Custom CSS /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(1,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
Mae2119 Posted February 24, 2023 Author Share Posted February 24, 2023 19 hours ago, tuanphan said: Add to Design > Custom CSS /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(1,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } } That worked! Thank you so much! Delighted 🙂 Link to comment
jonjorc Posted December 2, 2023 Share Posted December 2, 2023 (edited) That is a great fix. Is it possible to have the titles show on top of the photos in Desktop View on hover but have it the opposite on Mobile View (titles show before hover)? The site is debrasealphotography.com Edited December 2, 2023 by jonjorc adding site Link to comment
tuanphan Posted December 4, 2023 Share Posted December 4, 2023 On 12/3/2023 at 1:28 AM, jonjorc said: That is a great fix. Is it possible to have the titles show on top of the photos in Desktop View on hover but have it the opposite on Mobile View (titles show before hover)? The site is debrasealphotography.com You mean Desktop: same as current state Mobile: Always show overlay + title over image? 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
Nergis Posted December 7, 2023 Share Posted December 7, 2023 Hi Tuanphan On 12/4/2023 at 12:33 AM, tuanphan said: You mean Desktop: same as current state Mobile: Always show overlay + title over image? I used your code, which worked perfectly to move the titles underneath the image but I'd love to know how to keep the desktop same as current state and make mobile version show the title and overlay as default. This is the site: https://www.emmajoytheweddingplanner.co.uk/weddings-portfolio I would like it to be more like this example site on mobile: https://hollyclarkphotography.co.uk/weddings/ Thank you! Link to comment
tuanphan Posted December 8, 2023 Share Posted December 8, 2023 20 hours ago, Nergis said: Hi Tuanphan I used your code, which worked perfectly to move the titles underneath the image but I'd love to know how to keep the desktop same as current state and make mobile version show the title and overlay as default. This is the site: https://www.emmajoytheweddingplanner.co.uk/weddings-portfolio I would like it to be more like this example site on mobile: https://hollyclarkphotography.co.uk/weddings/ Thank you! Use CSS code @media screen and (max-width:991px) { .portfolio-overlay { opacity: 0.85 !important; left: 20px !important; top: 20px !important; width: calc(~"100% - 40px") !important; height: calc(~"100% - 40px") !important; } .portfolio-text { opacity: 1 !important; }} gardenlady 1 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
Kinreu Posted May 10 Share Posted May 10 On 2/23/2023 at 8:18 AM, tuanphan said: Add to Design > Custom CSS /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(1,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } } @tuanphan Ohhh so glad i've found this. And would be possible on mobile to display text in black (because on desktop my overlay color is black and text white, so when i apply the code update the text is here but white on white) thanks a lot. Link to comment
tuanphan Posted May 12 Share Posted May 12 On 5/11/2024 at 3:42 AM, Kinreu said: @tuanphan Ohhh so glad i've found this. And would be possible on mobile to display text in black (because on desktop my overlay color is black and text white, so when i apply the code update the text is here but white on white) thanks a lot. Use this /* Portfolio Overlay to grid mobile */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(1,1fr); } a.grid-item { height: unset !important; padding-bottom: 0 !important; } .portfolio-text { position: relative !important; opacity: 1 !important; } h3.portfolio-title { color: #000 !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
kjweiner Posted September 13 Share Posted September 13 I cannot find where to plug the code in, can someone guide me in the right direction! Link to comment
tuanphan Posted September 14 Share Posted September 14 17 hours ago, kjweiner said: I cannot find where to plug the code in, can someone guide me in the right direction! You can access Website Tools Choose Custom CSS 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
Roaky Posted October 1 Share Posted October 1 This is great. It solved my issue with browser hover text not showing on mobile devices. But the issue remains for tablets. I've looked for info about mobile vs iPad/tablet design. It appears to be an impossible (?) issue - tablets don't use the mobile version ---but also can't "hover"for text/titles. Is a fix/force possible? Thanks Roaky Link to comment
tuanphan Posted October 1 Share Posted October 1 6 hours ago, Roaky said: This is great. It solved my issue with browser hover text not showing on mobile devices. But the issue remains for tablets. I've looked for info about mobile vs iPad/tablet design. It appears to be an impossible (?) issue - tablets don't use the mobile version ---but also can't "hover"for text/titles. Is a fix/force possible? Thanks Roaky You can change 767 to 991 in 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