Jessica07

I’ve tried everything and searched everywhere but can’t find the solution!! Currently the list section only displays one row of content while on carousel. How can I get it to display within 2 rows of content on carousel? I’ve attached a video of what I’m trying to achieve (Its the categories section from the SHEIN.com website) My test URL: https://www.jessicafinds.com/new-page-3 RPReplay_Final1700152030.mov

Hi, I'm trying to create a list carousel section with two rows that move simultaneously when scrolling. My issue is that at the moment I am only able to display one row and can't seem to be able to add rows to my carousel. I've tried just about everything and have searched online exhaustively without finding the right CSS that could solve this. I would truly appreciate some help! I'm trying to achieve a list carousel that displays 4 columns and 2 rows at a time, and that is scrollable horizontally. I've attached videos of what I'm trying to achieve. I'd like to replicate the bottom section of SHEIN's homepage to display categories in the same way. My sample URL: https://jessicafinds.com/new-page-3 RPReplay_Final1700152030.movRPReplay_Final1700151982.mov

I modified my CSS code to this which solved both the row gap issue and the right column moving too high up issue. The vertical images (portrait mode) are perfectly distanced column-wise and row-wise, however now the issue is that the horizontal images (landscape mode) aren't, they are being overlapped. I noticed that the issue has to due with the fact that the padding beneath the horizontal style images is shorter that the one beneath the vertical style images, therefore when I reduce the bottom margin to where the vertical images are perfectly distanced, the horizontal ones get overlapped (left picture attached). But then when I increase the bottom padding to 90px in "div#BlogMasonryContainer article" to make the row gap of the first horizontal image right, the row gap between all other images gets messed up (right picture attached). Any solutions? @media only screen and (max-width: 767px) {#collection-65233dac92628703b8ca1dc1 { div#BlogMasonryContainer { columns: 2; column-gap: 0; height: auto!important; padding: 0px; margin-left: -3.3vw !important; margin-right: -3.3vw !important; } div#BlogMasonryContainer article { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 5px!important; box-sizing: border-box; margin-bottom: -240px; padding-bottom: 0px !important; padding-top: 0px !important; float: left !important; transform: unset !important; position: initial !important; } div#BlogMasonryContainer article img { width: 100%!important; border-radius:5px; height: auto !important; }}}

This is the URL of the page : https://www.jessicafinds.com/tester123999

Hi there, Hope you are well. I am using the Masonry Grid display for a new blog I am creating in the intent of recreating a layout like the LTK and Pinterest home pages. I want my layout to have 4 columns in desktop view and 2 columns in mobile view, images only, no text. I was able to achieve the exact desired layout for the desktop view just using squarespace's integrated edit section. However, on the mobile view the thumbnail images are lined in a single column. I was able to successfully achieve two columns in mobile view with CSS but the issue is that there is a huge horizontal gap between the rows which I can't seem to get rid of no matter what I try. Everything else is customized to my liking, I just want to reduce the gap between the rows of images in mobile view to a distance similar to the one in desktop view. When I use for example a negative value for margin-bottom, it succeeds in reducing the gap but then the right image in the first row moves upwards too! How do I go about this while keeping both images in the first row unaffected and aligned? I used this code: @media only screen and (max-width: 767px) { #collection-65233dac92628703b8ca1dc1 { div#BlogMasonryContainer { columns: 2; column-gap: 0; height: auto!important; padding: 0px; margin-left: -3.3vw !important; margin-right: -3.3vw !important; } div#BlogMasonryContainer article { position: relative!important; transform: none!important; width: 100%!important; padding: 5px!important; box-sizing: border-box; //margin-bottom: -265px !important; padding-bottom: 0px !important; padding-top: 0px !important; } div#BlogMasonryContainer article img { height: 50%!important; width: 100%!important; border-radius:5px; } }} The value "margin-bottom: -265px !important" in the above code obtains the exact desired row gap on the left column when removing the "//" in front of it, but how do keep the images in the first row aligned and therefore impede the right column from moving up past the left image in the first row?

Hey, I would really love to know how to have 2 different accordion blocks appear side by side on mobile view or how to have the items from a single accordion block listed side by side in 2 columns.