SSong Posted March 11, 2021 Share Posted March 11, 2021 Hi y'all! I have this index page where it has 6 grid summary blocks in 3 columns and 2 rows, each summary block has a gutter that is as wide as width A (see image). How do I make width B the same as width A? And how do I reduce the margin of each row (C)? And can the CSS code live in the advanced setting of this page instead of custom css? Here the link, password is 185fff. The sooner the better. Thank you thank you! Link to comment
Beyondspace Posted March 12, 2021 Share Posted March 12, 2021 6 hours ago, SSong said: Hi y'all! I have this index page where it has 6 grid summary blocks in 3 columns and 2 rows, each summary block has a gutter that is as wide as width A (see image). How do I make width B the same as width A? And how do I reduce the margin of each row (C)? And can the CSS code live in the advanced setting of this page instead of custom css? Here the link, password is 185fff. The sooner the better. Thank you thank you! I can not see the section you showed in the homepage? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
SSong Posted March 12, 2021 Author Share Posted March 12, 2021 15 minutes ago, bangank36 said: I can not see the section you showed in the homepage? Whoops... Should be there now. Not sure what happened, seems like the index page section got moved somewhere else. Link to comment
Beyondspace Posted March 12, 2021 Share Posted March 12, 2021 7 minutes ago, SSong said: Whoops... Should be there now. Not sure what happened, seems like the index page section got moved somewhere else. try #block-2b4273e9e61e112d248e + .sqs-row .sqs-col-4 .sqs-block { padding-right: 0; padding-bottom: 0; } #block-2b4273e9e61e112d248e + .sqs-row + .sqs-row .sqs-col-4 .sqs-block { padding-right: 0; padding-bottom: 0; padding-top: 0 } note that I used css selector to select the row based on the header right above it, so if you change the block order or replace them the code may not work as intended BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
SSong Posted March 12, 2021 Author Share Posted March 12, 2021 11 minutes ago, bangank36 said: try #block-2b4273e9e61e112d248e + .sqs-row .sqs-col-4 .sqs-block { padding-right: 0; padding-bottom: 0; } #block-2b4273e9e61e112d248e + .sqs-row + .sqs-row .sqs-col-4 .sqs-block { padding-right: 0; padding-bottom: 0; padding-top: 0 } note that I used css selector to select the row based on the header right above it, so if you change the block order or replace them the code may not work as intended Doesn't seem to be working Link to comment
Beyondspace Posted March 12, 2021 Share Posted March 12, 2021 Just now, SSong said: Doesn't seem to be working Did you add it into Design->Custom CSS panel? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
SSong Posted March 12, 2021 Author Share Posted March 12, 2021 15 minutes ago, bangank36 said: Did you add it into Design->Custom CSS panel? It worked! I guess it doesn't work when you put html styling in the advance settings of index pages. But I notice that there's still a lot of vertical spacing on mobile, any idea how to solve that? Link to comment
creedon Posted March 12, 2021 Share Posted March 12, 2021 1 minute ago, SSong said: I guess it doesn't work when you put html styling in the advance settings of index pages. For index pages you have to put the CSS in the the index page itself. Not the sub pages. Also that CSS needs to be wrapped in a style tag. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
SSong Posted March 12, 2021 Author Share Posted March 12, 2021 1 hour ago, creedon said: For index pages you have to put the CSS in the the index page itself. Not the sub pages. Also that CSS needs to be wrapped in a style tag. Right, I did put it in the sub pages with the style tag. I will remember that from now on. Thank you! Link to comment
jenniferboddam Posted August 5, 2021 Share Posted August 5, 2021 hi @creedon @bangank36 do you know if there is there a general way to target gutter width on the summary block? id like to add a bit of space between projects, every time i do, it either cuts off one project or does nothing at all site: https://flugelhorn-seahorse-lzrb.squarespace.com pw: design Link to comment
creedon Posted August 5, 2021 Share Posted August 5, 2021 @jenniferboddam Please point us to a specific summary block on a page where you want to achieve this effect. It is easier for us if we have an element to work with. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jenniferboddam Posted August 5, 2021 Share Posted August 5, 2021 @creedon see screen shot or its #block-yui_3_17_2_1_1627943224242_26754 in the 3rd section on the home page Link to comment
creedon Posted August 6, 2021 Share Posted August 6, 2021 @jenniferboddam Try the following. .sqs-block-summary-v2 .summary-item { margin-right : 0 !important; } The trick with the summary block items is that SS is setting CSS properties via code with the style attribute. When that is done those properties override all higher values. Unless one of the higher values has !important set. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jenniferboddam Posted August 9, 2021 Share Posted August 9, 2021 @creedon That didn't really work, it moved everything for some reason. I've managed to get part of it how I want I just cant seem to change the gutter width at all I've attached a screen shot, the left side is exactly how I want it, I just want the right side to be moved over to the right. Similar to how the left looks. I manged to center it but then the size of the images goes way too big. I cant seem to keep it at the size it is and center it Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.