hellothisisjeff

Hi @LP1994, Not sure if you're still having trouble with this issue, but I ran into the same problem on a site I was working on and figured out this CSS fix... It is most definitely a Squarespace underlying issue with gallery blocks. The main culprit is some relative positioning on the .sqs-gallery-thumbnails div wrapper that should be absolutely positioned instead which would allow the thumbnail strip itself to be as long as needed without breaking the layout. Add this to your custom CSS and should do the trick: .sqs-gallery-design-strip { position: absolute; bottom: 0; transform: translateY(100%); overflow: hidden; width: calc(~'100% - 34px'); } .sqs-block-gallery { margin-bottom: 90px; } Note: if you've overridden the Squarespace default block padding of 17px, you'll want to update the "34px" part of the width calc to account for twice your custom-set padding. Hope this helps!

Thank you, @ChristineDarby. This helped me resolve my own sitemap image demo content nightmare this week! Will be flagging this with Squarespace Support, as demo content from unused image block layouts should NEVER be used in generating final sitemaps!

I was having this same issue on a 7.1 site with a centered nav. I wrote this CSS and dropped it into the Custom CSS section which seems to solve the issue. // Header Nav Width Adjustment .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 2 0 100%; } .header-layout-branding-center-nav-center .header-actions--right { position: relative; right: 4vw; } The first value in the flex property basically tells the div holding the nav to grow to fill the space. However, this seemed to push the right side action buttons (cart icon, in my case) off the screen a bit, so I added the next line of code to move it back into place. A little bit of a hack job, but gets the job done.

@HortonGroup – It seems like SS has changed the way color overlays work in the Brine template family compared to previous templates. This may have something to do with how they're achieving the parallax effect now and also in a way that protects large background images from being accessible (and stolen!) by a site visitor. When you set an overlay color in the Style Editor, it seems to take the transparency and apply it directly to the image (which is hidden from the HTML code) rather than using the rgba declaration on a separate div's background-color. To override this behavior and accomplish what you mentioned above about targeting one specific section and canceling out the overlay, I simply set the overlay color to 0% opacity in the Style Editor which effectively nullifies that style setting. Then in my Custom CSS, I added this bit of code to rewrite the global color overlay for all background/banner images: .tweak-overlay-parallax-enabled .Index-page--has-image, .tweak-overlay-parallax-enabled .Intro--has-image { background-color: rgba(15,40,45,.7); } Then, I was able to target the section I wanted to remove the overlay from via its section ID name: #mission { background-color:rgba(0,0,0,0); } ... where "mission" was my section/page title and my rgba settings cancel out any color from overlaying the banner image for that section/page. Hope that helps. I would love to know where SS put the background images and if they can still be accessible through the code.