Jump to content

Product title and price not showing on tablet

Recommended Posts

Site URL: https://www.heymutant.com

Hello!

I am currently checking my site for "responsiveness" and I have seem to have encountered a problem when visualising my site on a tablet device. 

I have set up on"site styles" that the title for the product shows in an overlay mode when visiting the site from a desktop computer, but not when it's seen from a mobile device. When visiting the site from a mobile device, I have set up that the title appears below the image in the product block. This works when visualising the page from both desktop and a mobile phone, so all good here.

The issue is when I'm on a tablet: I can see the mobile version (the hamburguer menu, etc), and everything works, EXCEPT the titles on the shop page are not showing until I click on the product blocks - which I guess it shouldn't happen because that's the equivalent to a "hover".

At first I assumed it was a breakpoint issue, which I initially set up at 992px. I have tried changing that to either 768px and 1280px but it doesn't seem to change the way the titles are shown on a tablet. I have also tried removing all my custom code / css and it seems that the problem isn't rooted there, because I still can't see the product blocks with the title underneath when I "reset" the page back to the default version.

I am attaching some photos to illustrate the problem.

It's quite frustrating because I really like the text overlay effect on desktop and the title below also looks great on a mobile phone, but I wouldn't want to sacrifice the overlay effect so that the title always appears - therefore solving the problem.

Any help or advice would be greatly appreciated,

Have a good day everybody! 😀

Patri

 

PS:

My site is: www.heymutant.com

password: paginaweb

Shop-Desktop.png

Shop-Tablet.png

Shop-Mobile.png

Link to comment
  • Replies 7
  • Views 310
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

@media screen and (min-width:768px) and (max-width:1024px) {
section.ProductList-overlay {
    position: static !important;
    opacity: 1 !important;
}
.ProductList-meta {
    opacity: 1 !important;
}
h1.ProductList-title {
    font-size: 20px !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

Hey tuanhpan,

I have another question - related to the previous issue.

I have another section on my website (www.heymutant.com/plantas) on which I list a series of plants. On my desktop version I have managed to set it up so that when I hover on it, the image gets a color overlay and then the title and subtitle appear on top. 


On the mobile devices, the text appears on top of the image (without having to hover on them) but this makes it difficult to recognise the plant on the picture. On mobile and tablet, I would like for the tittle and subtitle to appear directly below the image  (just like you helped me do on the product listing page).

Is this possible?

 

I have tried to work it out but my css skills are not enough.

 

This is the code I added for this effect:

/* Style text image block */
.design-layout-stack .image-card-wrapper {
 .image-title p {
 font-family: 'decay'!important;
 font-size: 4vw !important;
 color: #ff190f !important;
 letter-spacing: 0em;
 line-height: 1em;
 text-transform: uppercase;
}
}

/* Hover effect on image block */
.design-layout-poster .image-card-wrapper {
 .image-title p {
 font-family: 'decay3'!important;
}
}

@media only screen and (min-width: 767px) {
  
.design-layout-poster .image-card-wrapper {
 .image-title p {
 font-family: 'decay3'!important;
}
  visibility: hidden;
  opacity: 0;
  transition-duration: 1s;
}

.design-layout-poster:hover .image-card-wrapper {
   .image-title p {
 font-family: 'decay3'!important;
}
  visibility: visible;
  opacity: 1;
  background-color: hsla(0, 0%, 0%, 0.47);
}
}

 

Thank you in advance,

Patri

Screenshot 2022-07-11 at 10.09.29.png

Screenshot 2022-07-11 at 10.11.15.png

Edited by patri_peix
I forgot to include images.
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.