a few style tweaks for desktop and mobile

[techtherapy]

A few questions.

For both desktop and mobile:

1. On the product category page, how to remove the “Read More” icon?

For mobile:

2. On the home page, how to remove the price overlay?
3. On the home page, is there any way to have the product name appear?

thanks.

Attachments:

You must be logged in to view attached files.

[techtherapy]

also for mobile:

4. how to change the product image size? the bottom gets cut off.

[techtherapy]

worked a few out:

1)

.product .cart-overlay {
    display: none!important;
}

2)

@media only screen and (max-width: 479px) {
.product figure .cart-overlay, .product figure .cart-overlay .shop-actions {
    display: none!important;
}

[techtherapy]

This reply has been marked as private.

[David Martin – Support]

Hi,

Please try this:

@media only screen and (max-width: 991px) {
figure.animated-overlay figcaption {
    opacity: 1;
    background-color: transparent!important;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}
}

Thanks.

[techtherapy]

thanks David. tried but no difference.

[David Martin – Support]

What mobile/device are you testing that on?

Thanks.

[techtherapy]

iPhone 6.

[David Martin – Support]

Hi,

Please add these media queries also to handle the small screens.

@media only screen and (max-width: 767px) {
figure.animated-overlay figcaption {
    opacity: 1;
    background-color: transparent!important;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}
}

@media only screen and (max-width: 479px) {
figure.animated-overlay figcaption {
    opacity: 1;
    background-color: transparent!important;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}
}

Any trouble, please add me a WP login.

Thanks,
David.