how to have title and price of product show/ reveal upon hovering ONLY ON DESKTOP shopify

Shopify Discussion
1

hello, i have managed to make this hover effect work on my shop, but the hover effect is taking place on my mobile device as well.

THIS IS THE CODE I USED IN MY theme.liquid to get the effect on desktop

.card--standard>.card__content { position: absolute; top: 0; width: 100%; height: 102%; padding: 0px; flex: auto; left: 0; right: 0; bottom: 0; border: 2px solid transparent; } .card--standard>.card__content .card__information { display: flex; flex-direction: column; justify-content: space-between; padding: 0; } .card__heading { text-align: center; } .card-information .price { text-align: right; } .product-grid .grid__item .card { padding: 30px 0; } .product-card-wrapper .card { position: relative; } li.grid__item:hover .card__content { border-color: orange; } .card__content { opacity: 0; } li.grid__item:hover .card__content { opacity: 1; } }

heres what it looks like on my shop on desktop - https://lerille.shop/

and i am trying to make it look similar to this on mobile but without the bold text, i want the font and everything the same on my shop but in this position on mobile

unnamed.jpg
unnamed.jpg1170×2532 138 KB

2

Hi Chase,

If you want the changes for desktop only you can add media queries to set the breakpoint.

Ex:

@media screen and (min-width: 750px) {
  {...your CSS code}
}

Now the CSS inside will only be applied for the viewport is at least 750px wide