cleanslatemarketing Posted February 2, 2020 Share Posted February 2, 2020 I am using 7.1 and have a Portfolio Overlay Grid on the home page. Works fine on desktop and I appreciate that the hover effect won't work on mobile, but at the moment the descriptions aren't appearing on mobile view either. Is there a reason for this? anyone know how I can force the descriptions to show? Link to comment
tuanphan Posted February 3, 2020 Share Posted February 3, 2020 Can you share link to homepage? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ryan_ball Posted February 17, 2020 Share Posted February 17, 2020 I have the same issue, my website is www.ryanballphotography.com I would like to keep the hover function on the desktop comp, but on mobile show the title all the time. Link to comment
tuanphan Posted February 18, 2020 Share Posted February 18, 2020 19 hours ago, ryan_ball said: I have the same issue, my website is www.ryanballphotography.com I would like to keep the hover function on the desktop comp, but on mobile show the title all the time. Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .portfolio-text { opacity: 1 !important; } } Psc2180 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mcass44 Posted April 8, 2021 Share Posted April 8, 2021 I am having the same issue as people on this forum. I am trying to force the hover state on my portfolio grid in mobile. Ideally when it was in mobile the image would automatically darken with opacity at .35 and the text would automatically appear in the center of the image. Essentially exactly how it looks when you hover in desktop. Does anyone know the CSS to make this happen? My site is: https://www.michaelhcassell.com/ Link to comment
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 On 4/8/2021 at 10:47 PM, mcass44 said: I am having the same issue as people on this forum. I am trying to force the hover state on my portfolio grid in mobile. Ideally when it was in mobile the image would automatically darken with opacity at .35 and the text would automatically appear in the center of the image. Essentially exactly how it looks when you hover in desktop. Does anyone know the CSS to make this happen? My site is: https://www.michaelhcassell.com/ I see you solved with this CSS @media screen and (max-width: 640px) { .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text,.tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text { opacity:1 !important } .portfolio-overlay { opacity: .35 !important } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
VBA Posted December 21, 2021 Share Posted December 21, 2021 Hi! As others on this forum I would like to know if it is possible to have hover effect on mobile exactly the same as displayed on desktop for portfolio website? if not possible could it be possible to leave overlaid hover effect with text in center on desktop (as it is now) and change on mobile leaving text fixed but below image as if it were simple grid display? thanks a lot!! https://valenciabiscottini.com Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/21/2021 at 6:33 PM, VBA said: Hi! As others on this forum I would like to know if it is possible to have hover effect on mobile exactly the same as displayed on desktop for portfolio website? if not possible could it be possible to leave overlaid hover effect with text in center on desktop (as it is now) and change on mobile leaving text fixed but below image as if it were simple grid display? thanks a lot!! https://valenciabiscottini.com Add this 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; } } Spankypod and VBA 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Majojo Posted January 5, 2022 Share Posted January 5, 2022 On 12/24/2021 at 9:37 PM, tuanphan said: Add this 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; } } This didn't work for me. It just made the spaces between my columns expand. I have the same problem as the previous commenter, and I want the same hover plus overlay/title effect from the desktop version in the mobile version. Could I get some help with this? Here is my website: https://www.majoaparicio.com/ Thank you! Link to comment
tuanphan Posted January 5, 2022 Share Posted January 5, 2022 6 hours ago, Majojo said: This didn't work for me. It just made the spaces between my columns expand. I have the same problem as the previous commenter, and I want the same hover plus overlay/title effect from the desktop version in the mobile version. Could I get some help with this? Here is my website: https://www.majoaparicio.com/ Thank you! The text is white color so you see space. Use this new code /* 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; } .portfolio-text h3 { color: black !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Majojo Posted January 6, 2022 Share Posted January 6, 2022 On 12/24/2021 at 9:37 PM, tuanphan said: Add this 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; } } On 1/5/2022 at 2:19 AM, tuanphan said: The text is white color so you see space. Use this new code /* 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; } .portfolio-text h3 { color: black !important; } } This still didn't do the same hover overlay effect the desktop does. It just added a title under each image. Link to comment
tuanphan Posted January 8, 2022 Share Posted January 8, 2022 On 1/6/2022 at 9:15 PM, Majojo said: This still didn't do the same hover overlay effect the desktop does. It just added a title under each image. This make title under image on mobile. Can you describe again what you want? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MixedByHerman Posted October 22, 2022 Share Posted October 22, 2022 On 1/8/2022 at 2:44 AM, tuanphan said: This make title under image on mobile. Can you describe again what you want? Jumping in late here. I have the same issue regarding portfolio hover overlay. Your CSS code helped a lot, thank you! Do you know if it´s possible to have a touch/tap on a mobile device trigger the overlay instead of a hover? In that way the title will not permanently be visible under the image, but appear when you tap the image? Thank you very much! Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 22 hours ago, MixedByHerman said: Jumping in late here. I have the same issue regarding portfolio hover overlay. Your CSS code helped a lot, thank you! Do you know if it´s possible to have a touch/tap on a mobile device trigger the overlay instead of a hover? In that way the title will not permanently be visible under the image, but appear when you tap the image? Thank you very much! Can you share link to your site? We can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MixedByHerman Posted October 31, 2022 Share Posted October 31, 2022 On 10/23/2022 at 9:03 AM, tuanphan said: Can you share link to your site? We can take a look https://www.hasselherman.com/ Password: thankyouforhelping Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 On 10/31/2022 at 7:14 PM, MixedByHerman said: https://www.hasselherman.com/ Password: thankyouforhelping You mean first tap: show title + overlay second tap: redirect to individual projects? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MixedByHerman Posted November 30, 2022 Share Posted November 30, 2022 On 11/4/2022 at 2:24 PM, tuanphan said: You mean first tap: show title + overlay second tap: redirect to individual projects? Exactly! Link to comment
MikeAwo Posted February 27 Share Posted February 27 (edited) Hi @tuanphan Is it possible to remove the hover feature for mobile and have a simple grid with pictures and titles but retain the hover feature on web? Or better, if the 'hover' feature can work on mobile but while scrolling like what they have at hanzo.es. Is this feasible? Edited February 27 by MikeAwo Link to comment
tuanphan Posted February 28 Share Posted February 28 On 2/27/2023 at 7:08 AM, MikeAwo said: Hi @tuanphan Is it possible to remove the hover feature for mobile and have a simple grid with pictures and titles but retain the hover feature on web? Or better, if the 'hover' feature can work on mobile but while scrolling like what they have at hanzo.es. Is this feasible? Yes. Possible. What is your site url? We can help easier Or you can try adding this to Design > Custom CSS first /* 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MikeAwo Posted March 3 Share Posted March 3 On 2/28/2023 at 2:02 PM, tuanphan said: Yes. Possible. What is your site url? We can help easier Or you can try adding this to Design > Custom CSS first /* 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; } } I'm sorry. Site url is https://koala-bulldog-969f.squarespace.com/config/ Password is 1234 This code disabled the hover function on mobile alright but the project is not highlighted when I scroll into view. Basically, I want each image (project) come into view as I scroll through the page as a replacement to having to hover over each text. Link to comment
tuanphan Posted March 6 Share Posted March 6 On 3/4/2023 at 1:36 AM, MikeAwo said: I'm sorry. Site url is https://koala-bulldog-969f.squarespace.com/config/ Password is 1234 This code disabled the hover function on mobile alright but the project is not highlighted when I scroll into view. Basically, I want each image (project) come into view as I scroll through the page as a replacement to having to hover over each text. Hi, I don't know this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
RenatoT420 Posted September 26 Share Posted September 26 Hi everyone, im trying to have the same "smooth" effect of hover in my portfolio on mobile, i tried to use some codes i found here but theres no effect on mobile and it just appear like its already on the effect. I would appreaciate a lot youre help website: www.renatotarma.com Link to comment
tuanphan Posted October 1 Share Posted October 1 On 9/27/2023 at 4:38 AM, RenatoT420 said: Hi everyone, im trying to have the same "smooth" effect of hover in my portfolio on mobile, i tried to use some codes i found here but theres no effect on mobile and it just appear like its already on the effect. I would appreaciate a lot youre help website: www.renatotarma.com "smooth" - can you describe in more detail? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
BradleyK Posted October 31 Share Posted October 31 Was this ever solved? I'm looking for the same hover effect on desktop to appear on mobile. Currently, the hover effect is turned off of the mobile side of things. Link to comment
tuanphan Posted November 3 Share Posted November 3 On 10/31/2023 at 11:22 PM, BradleyK said: Was this ever solved? I'm looking for the same hover effect on desktop to appear on mobile. Currently, the hover effect is turned off of the mobile side of things. What is your page url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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