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

Macy is not disabled when columns: 1 is set #88

Open
1aurabrown opened this issue Jul 28, 2021 · 0 comments
Open

Macy is not disabled when columns: 1 is set #88

1aurabrown opened this issue Jul 28, 2021 · 0 comments

Comments

@1aurabrown
Copy link

In the documentation it says:

breakAt

Default: None This object allows you to specify how the total number of columns will change based on the width of the viewport. Setting an option to 780: 3 for example will adjust the column count to 3 when the viewport is <= 780px. If the viewport resizes after the page has loaded, Macy will rerun to ensure optimum sorting

If the column is set to one then Macy will remove all styling to leave you to style it perfectly on mobile.

Added in v2.1 breakAt now supports changing margin within these breakpoints.

My macy setup:

msnry = new Macy ({
    container: '.js-masonry-wrapper',
    columns: 1,
    waitForImages: true,
    mobileFirst: true,
    breakAt: {
      '768': {
        columns: 2,
        margin: {
          x: 160,
          y: 32
        },
      }
    }
  })

Everything looks great on desktop: https://share.getcloudapp.com/z8uONPEA

On mobile, the layout does switch to single column, but Macy continues to be active. Any changes to the viewport produce a visual lag during which Macy is recalculating the layout, as reflected in the absolute positions assigned to the each element: https://share.getcloudapp.com/bLukXgzO

This remains the case when I set mobileFirst to false and invert the way my breakpoints are set up (so that columns: 1 is nested in a breakpoint under breakAt).

In a single column layout, absolute positioning is unnecessary and makes the site look buggy. Macy should be disabled as specified in the documentation.

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

No branches or pull requests

1 participant