Return to previous page

Would like to remove some button on the product design but only on mobile view and not desktop.

This topic has 4 replies, 2 voices, and was last updated 1 months ago ago by Tony Rodriguez

Qilah

Participant

March 22, 2024 at 07:18

For the product design, I have the options where when on hover, it will show the “add to cart” button & “Quick view” button. It is fine on desktop view. However on mobile & Ipad view, the button is there on default in the middle of the picture which covers the photo. Is there anyway to make the buttons to be somewhere else rather than in the middle of the picture. Attached is how it looks like on mobile/ipad on default.

Files is visible for topic creator and
support staff only.

#387984 Copied Theme version: 9.2.9

3 Answers
Tony Rodriguez

Support staff

March 22, 2024 at 08:56
Hello, @Qilah,

Thank you for reaching out to us with your concern.

In order to address the issue you are experiencing, we kindly request that you implement the following custom CSS code. Please navigate to the XStore section, then proceed to Theme Options, and select Theme Custom CSS. Once there, insert the code into the Global CSS area.

Here is the code you should add:
```
@media (max-width: 767px) {
    .product-view-mask3 .content-product .footer-product {
        position: relative !important;
        top: 10px !important;
        bottom: 0px !important;
    }
}
```
The result should look like this: https://imgur.com/NMWzXDK

We trust that this will effectively resolve your concern. Should you require any further assistance, please do not hesitate to reach out.

Best Regards,
The 8Theme Team
#388009 Copied
Qilah

Participant

March 22, 2024 at 10:00

Yay thank you that worked on mobile. For iPad view I would also like it to be in that way. What code can I add?

#388054 Copied
Tony Rodriguez

Support staff

March 22, 2024 at 11:20
Hello, @Qilah,

In order to address the issue you are experiencing, we kindly request that you implement the following custom CSS code. Please navigate to the XStore section, then proceed to Theme Options, and select Theme Custom CSS. Once there, insert the code into the Global CSS area.

Here is the code you should add:

For mobile:
```
@media (max-width: 767px) {
    .product-view-mask3 .content-product .footer-product {
        position: relative !important;
        top: 10px !important;
        bottom: 0px !important;
    }
}
```
For Tablet/iPad:
```
@media(min-width: 768px) AND (max-width: 991px){
    .product-view-mask3 .content-product .footer-product {
        position: relative !important;
        top: 10px !important;
        bottom: 0px !important;
    }
}
```
We trust that this will effectively resolve your concern. Should you require any further assistance, please do not hesitate to reach out.

Best Regards,
The 8Theme Team
#388068 Copied
Tagged: desktop view, mobile view, product design, remove buttons, woocommerce, wordpress templates
Viewing 4 results - 1 through 4 (of 4 total)