Product title and price not showing on tablet

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

Tablet

You want

• Add it under image, same as mobile
• OR
• Add it over image

I would like that the product information (product title and price) appears under the image on the tablet, just like it does on the mobile phone devices.

Thank you so much for your response,

Patri

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

This works perfectly,

thank you so much tuanphan for your assistance!

Have a good day,

Patri

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

Add to Plantas Page Header

<style>
  @media screen and (max-width:767px) {
  figcaption.image-card-wrapper {
    position: static !important;
    margin-top: 20px;
}
  }
</style>

Niiiiice! Thank you so much! You really helped me get those final touches on point 🙂

Have a good day!

Patri.