Return to previous page

Product Carousel responsiveness and hover buttons

This topic has 10 replies, 2 voices, and was last updated 2 years, 10 months ago ago by fishmonkeyman

fishmonkeyman

Participant

June 8, 2021 at 16:56

Hello again,

PRODUCT CAROUSEL

I’ve found some quirky responsive behaviour setting up the product carousel on my home page.

If I set the responsive columns to 5 4 3 2, both tablet and mobile mode appear to display two columns (rather than 3 & 2). The carousel in tablet mode with two columns looks too large and clumsy compared to the other elements on the home page. But three columns looks too small on mobile devices. So, I cannot get the settings to look good on smaller screens.

Note – I am assuming here that when the number of columns of other elements on the page change, so should the carousel’s columns. The other columns shift from 1/3 to 1/2 to 1/1. But the carousel’s columns are at their smallest (mobile) number of columns (2 in this case) when the other columns are at 1/2 (as well as 1/1). This is easy to see if you simply resize the window.

Are the responsive modes working correctly? They do not appear so to me.

CAROUSEL BUTTONS:

When I select ‘hover bottom’ for the buttons, there are two issues:
– I have disabled the ‘quick view’ option, but there is still a white space on the left where the icon was. I’d like to remove the space.
– On the right of the basket icon is ‘Add to Basket’ text which is redundant and is subject to layout issues. Is there a way in which this text can be removed please?

Many thanks in advance
–Gary.

Please, contact administrator
for this information.

#290307 Copied Theme version: 7.2.10 WooCommerce version: 5.3.0

9 Answers

fishmonkeyman

Participant

June 9, 2021 at 13:51

Just sending links to a couple of screen caps (in Private Content Area) which may help explain. Thanks. –Gary.

Please contact administrator
for this information.

#290387 Copied

Olga Barlow

Support staff

June 10, 2021 at 11:08

Hello,

1) PRODUCT CAROUSEL. Provide us with FTP access to your site to check the issue in more detail.

2) CAROUSEL BUTTONS. Check now, please.

Regards

#290489 Copied

fishmonkeyman

Participant

June 11, 2021 at 11:47

1. Thank you. See private content area
2. That’s perfect! Many thanks!

Please contact administrator
for this information.

#290633 Copied

Olga Barlow

Support staff

June 11, 2021 at 20:07

Hello,

Thank you. I passed your issue to our developers. They will be able to check the problem from Monday.

Regards

#290691 Copied

fishmonkeyman

Participant

June 13, 2021 at 16:18

Hello again.
The ‘hover bottom’ cart & favourite buttons on the home page are narrower than their counterparts on the shop pages. Could you tell me how to make them the same width please?
Also, I’d like to change the hover state on the buttons when cursor is over the button, background and icon colour. Could you provide me with the CSS for that too please?
Many thanks in advance.

#290820 Copied
Olga Barlow

Support staff

June 14, 2021 at 13:48
Hello,

You use the Cloudflare CDN and we don’t see our changes for the slider. So, please, clear the CDN cache to apply our changes and check the slider on the tablet.

Check the width of the buttons now.
Add the below code to Theme Options > Custom CSS to change the hover color of the bg and icon
```
.view-color-white .footer-product .button.compare:hover, 
.view-color-white .footer-product .button:hover, 
.view-color-white .footer-product .show-quickly:hover, 
.view-color-white .footer-product .et-wishlist-holder:hover a {
    background: var(--et_active-color);
    color: #fff;
}
```
Regards
#290876 Copied
fishmonkeyman

Participant

June 15, 2021 at 12:08

Again, thanks so much for your excellent support. The buttons are now correct and the CSS worked perfectly.

I recently moved to a new host, so I am still learning how to set up Cloudflare. I have now cleared the cache, so hopefully that will allow you to see your changes.

Thank you!

#290964 Copied

Olga Barlow

Support staff

June 15, 2021 at 15:53

Hello,

You are welcome. Check the number of slides on tablet now https://prnt.sc/15idrdv

Regards

#291006 Copied

fishmonkeyman

Participant

June 17, 2021 at 08:49

YES! That is how I imagined it should work. That was driving me crazy. Thanks so much!

#291185 Copied
Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Product Carousel responsiveness and hover buttons’' has been successfully resolved, and the topic is now closed for further responses

Product Carousel responsiveness and hover buttons

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection