Articles in the Shop section not appearing properly

[chjavata]

Hello,
When I open my shop (https://chjavata.com/shop/). It doesn’t display it properly.
All of the articles seem very tiny.
How can we make it look like a gallery (one shirt at a time) on a mobile phone?

Many thanks!

[SeaTheme]

Hi,

Please paste the custom CS code to “Appearance > Customize: Additional CSS”:

@media(max-width:767px) {
 .responsive-ux.woocommerce.archive .product-item { width: 100% !important;}
}
@media(max-width:480px) {
 .responsive-ux.woocommerce.archive .product-item { width: 100% !important;}
}

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[chjavata]

Thank you very much.
One last question: how can I make the shirt image looks a bit more visible while still showing the price when hovering on the image? At the moment it removes the image completely and shows the price.

[SeaTheme]

Welcome!

It is possible to show all text including title, price, add-to-cart. Please paste the custom CS code to “Appearance > Customize: Additional CSS”:

.product-caption {
opacity: 1;
background-color: transparent;
}

Regards

[chjavata]

this is good but i’d like to get this whenever i hover on the image (pass the mouth on the image)? How can i do?

[SeaTheme]

Hi,

I am not sure that if understand your question. Could you give more tips? Thanks.
Did you mean to show the price only when mouseover?

Regards

[chjavata]

Yes i’d like to show all information as it is right now but only when mouseover (but still showing the shirt in the background with some more transparency)

[SeaTheme]

I don’t understand this question still.
Could you please paste some images to explain your needs(or send to uiueux@gmail.com)? Thanks!

[chjavata]

So when you see the image, it shows only the shirt.
When you mouseover, you see both the shirt + description (however the shirt is a bit more transparent than the original image when you don’t mouseover it – so that you can see the text better)
When you remove the mouseover, it goes back to the original image where you can only see the shirt

[SeaTheme]

Please go to “Appearance > Customize: Additional CSS”:
Remove the custom CSS:

.product-caption {
opacity: 1;
background-color: transparent;
}

Add the custom CSS:

.product-caption { 
    background-color: rgba(255,255,255, 0.7);
}

[Author]

Posts