Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix carousel dots overlapping thumbnails on Product page. #1351

Merged
merged 1 commit into from
Sep 21, 2018
Merged

Fix carousel dots overlapping thumbnails on Product page. #1351

merged 1 commit into from
Sep 21, 2018

Conversation

Ubersmake
Copy link
Contributor

What?

Things get interesting on the product page image thumbnail carousel when there are a lot of images on that product.

Specifically, when there are more than 22 images the carousel navigation dots will overlap with the image thumbnails.

The way margins are set up, with a window wide enough that Cornerstone will no longer expand out, there will be up to 17 navigation dots per row. These numbers are lower on a narrower view. Using Chrome, this is reduced to 11.

This fix is only for making sure navigation dots don't overlap thumbnail images. The fix also increases the space between the thumbnails and the dots. Only navigation dots on the product page are affected. Carousel navigation on other pages, like the home page, is not.

As an aside, navigation with multiple rows will always seem weird, and the only well-designed solution may be a scroll bar with a variable-width handle, which Slick Carousel (which Cornerstone uses) does not implement.

Tickets / Documentation

Screenshots

Product Pages Before:

screen shot 2018-09-20 at 2 19 34 pm
screen shot 2018-09-20 at 2 19 39 pm
screen shot 2018-09-20 at 2 19 43 pm

Product Pages After:

screen shot 2018-09-20 at 2 20 28 pm
screen shot 2018-09-20 at 2 20 31 pm
screen shot 2018-09-20 at 2 20 34 pm

Narrow Product Page After:

screen shot 2018-09-20 at 2 28 23 pm

@bigbot
Copy link

bigbot commented Sep 20, 2018

Autotagging @bigcommerce/storefront-team @davidchin

@Ubersmake Ubersmake requested review from junedkazi and a user September 21, 2018 17:21
@Ubersmake Ubersmake merged commit 5a87254 into bigcommerce:master Sep 21, 2018
@Ubersmake Ubersmake deleted the STRF-5323 branch September 21, 2018 17:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants