cmunoz88 Posted March 10, 2022 Share Posted March 10, 2022 Site URL: https://christophermunoz.com/portfolio/utsa-convo-banners Is there any CSS I can add to media queries to have the masonry gallery not stack on smaller tablet size? It stays masonry style on mobile and desktop but it won't for smaller tablet size. Here is CSS coding I am using for this specific break point: @media screen and (max-width:1024px) and (min-width:641px) Link to comment
tuanphan Posted March 13, 2022 Share Posted March 13, 2022 Try adding to Design > Custom CSS > then save & reload the site /* masonry 2 items */ @media only screen and (max-width: 992px) and (min-width:768px) { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 1.5px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment