Jump to content

Portfolio grid overlay & titles in mobile version

Go to solution Solved by tuanphan,

Recommended Posts

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 by Mae2119
Link to comment
  • Mae2119 changed the title to Portfolio grid overlay & titles in mobile version
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
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
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
  • 9 months later...

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 by jonjorc
adding site
Link to comment
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

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
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;
}}

 

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
  • 5 months later...
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
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
  • 4 months later...
  • 3 weeks later...

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
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.