SChan

Thanks! That worked like a champ. Would you care to explain what you did? I'd love to learn what the code means and what it does rather than just paste & run..

Site URL: https://trumpet-red-ffsb.squarespace.com I am trying to change my portfolio landing page (which is also my home page) so I get a different image for the mobile site vs the desktop site. That seems easy enough, but it changes the banner for the page under that as well. Any page accessed through the portfolio pages don't change however, just the portfolio and the pages connected to portfolio. So if you go to the Chalkboard Art page , it has the same image as the portfolio page (I'd like it to be plain black). But if you go to Stonyfield under the Chalkboard Art, it's black, just how I want it. Is there any way to keep it from changing the secondary page? I got the original code from Inside The Square /* =============================== */ /* Shows different image 4 mobile */ @media only screen and (max-width: 640px){ #page .page-section:nth-child(1) .section-background img {opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/62243b39a0f8a94fd0f4b835/t/622a92407674cb7948261a63/1646957124561/Mobile-bkg.png); background-size: cover; background-position: center; background-repeat: no-repeat; } } https://trumpet-red-ffsb.squarespace.com sharynchanart Thanks so much!

I seem to have found a solution to this by adding this code in the Advanced section of every page that I have a Simple Gallery section. section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper { display:flex; align-items:center; justify-content: center; flex-wrap: wrap; flex-direction:row; grid-template-rows:unset !important; grid-template-columns:unset !important; grid-column-gap:unset !important; grid-row-gap:unset !important; } section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper figure { flex-basis:12%; padding:0 1.5vw 3vw 1.5vw; } @media screen and (max-width:768px) { section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper figure { flex-basis:45% } } I found it at this post here : https://forum.squarespace.com/topic/202953-centering-the-gallery-block-images/?do=findComment&comment=490243 If there is a more global way to do this, I'd love to know

I've tried this code on my site but I can't get mine to work no matter what. I've tried it with and without the collection number .sqs-gallery-block-grid .sqs-gallery-design-grid { display: flex; justify-content: center; flex-wrap: wrap; } I can see others have gotten it to work, but I cannot. Can you help me? Thanks so much https://trumpet-red-ffsb.squarespace.com sharynchanart

Also, if you may have to adjust the right & left numbers as I've found the blocks to be too close together.. I just deleted the right & left margins to get what I wanted

@Channon, did you go all the way to Settings->Advanced->Code Injection and put it in the Header?

@Channon, I figured out how this works. Put this code in the Settings>Advanced page. It looks like this : <style> .sqs-block { margin-left: -30px; margin-right: -30px; margin-top -30px; margin-bottom: -30px; } < /style> (Get rid of the space between the "<" and the "/" in the closing "style"). I had to increase the number from -10 to -30 to really notice the difference. The code that MickeyArdell provided helps if you see a horizontal scroll bar and that goes in the Design>Custom CSS page. It should look like this : div { max-width: 100%; overflow-x: hidden; }

@Socialitestyle & @MickeyArdell, Where did you insert this piece of code ? I tried both the Settings->Advanced for an individual page and the Design->Custom CSS and neither did anything. I too would like to make those spaces smaller between blocks.