LenP

Gallery also cuts off text on the same line that is too long. It looks like replacing the Gallery section with a List section will work for what I'm after. 

https://www.conservenassau.org/egans-creek-native-garden

thanks for having a look

I would like to use a Gallery section to provide information about plants in the image. After the 4th line, the text gets cut off. I've tried

 .gallery-caption-content {height: 100% !important} 

and some other wrapper classes without luck. Thanks for any suggestions.

an aside: The separation between lines is using css from Becca Harpain: https://insidethesquare.co/squarespace-tutorials/gallery-caption

Thanks @creedon. That does exactly what I was looking for.

I often use code blocks to set anchors on a page, however, since they are not visible, it can be frustrating searching around to find them again. I would like the code block to be visible when I am in edit mode, but otherwise not visible. Here is the code I tried without luck:

/*
 ** display border around code blocks in edit mode only **
*/

body:not(.sqs-edit-mode) .source-code
{
  display: none !important;
  opacity: 0 !important;
}
body.sqs-edit-mode .source-code
{
  display: flex !important; 
  border: 1px solid red !important;
  opacity: 1 !important;
}

Thanks.

I am applying a css style to my links however I do not want the style applied to links in the header nav or in the footer. My code here works to exclude the header nav but does not work to exclude the footer. 

/* current general css for links */
p a:hover {
  font-style: italic;
  color:#990000!important; 
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: #990000 !important;
}

/* what I'm trying to add */
p:not(.header-nav-list):not(#footer) a {
  text-decoration: none !important;
  color: #000 !important;
  font-weight: 600;
  box-shadow: inset 0 -12px 0 rgba(142, 169, 139, .35);
  color: inherit;
  transition: all 1.2s ease-in-out;
}

p:not(.header-nav-list):not(#footer) a:hover  {
  background: rgba(142, 169, 139, .35);
  box-shadow: none;
}

I have also tried to replace "#footer" with the section id of the footer. 

Thanks in advance!

The test page is at https://www.conservenassau.org/testmapspage

I made it with an inelegant solution of creating a background image with a solid color strip at the top- so its really still all one full extent background. Code in the header for the page (since this is just a test) uses absolute position to move the nav and social up to the top. It looks ok at the browser window size I showed in the screenshot, but changing the browser window width sort of mucks it up. I'd love to hear other solutions that are more structural.

Header for all pages. ConserveNassau.org  passwd: see2theSea@dawn

Thanks

SS 7.1. Starting with the Clarkson template which has the navigation along the top of a  background image. I would like to bring the navigation to a solid background above the full bleed image. Because the background is selected in the section below the header section and fills the header section, those 2 sections seem to have some sort of association, so I'm guessing part of my question is if they can be disassociated.

Here's the current header

and a good approximation of what I'm aiming for

THANKS