JayVanDyke

Try this too... this gets rid of that space completely

.lessons.collection-content-wrapper .nested-category-children {
  display: none !important; //remove the slashes in front of this one

}

You will never be able to add a text box to that section without using some kind of custom javascript and really there's no reason to when you can adjust the spacing with CSS or within the section settings. My code is to remove the space from above the videos. Then you add the text box section above it.

If you want the text box you could try this in cusom CSS if there's no height controls for that page section.

.lessons-list-section .lessons.collection-content-wrapper {
  padding-top: 3vw !important; //change this number. default for your page is 4vw
}

change that 3vw to whatever works best. It's currently 4vw so 3 may be enough for you when you put the code in.

You cannot add a text box without adding a section to the top, the videos are in a gallery type section. Why don't you want to add a section up there? You should be able to adjust it's height and bottom padding enough to make it look like it's attached to those videos.

No that’s a css thing. There may be some code for that in the installation page though at the bottom, there’s a section for styling. It just depends on what buttons and whether he’s provided that code there. 

That part is different. Remove everything between these two red marks including the comma and those curly brackets.

under the sort settings in your code, change it to "false"

I don't see the CSS implemented anywhere? These all need to be in your custom CSS and the background color part needs to be changed into the color you want. 

.kitchen #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.style #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.luxury #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.tech #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.health-leisure #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

@MikeM100 try something like this in your custom css. This should make everything 0 and lined right up but if you increase that bottom margin part in the second line you can adjust spacing as you want.

.sqs-block-gallery .slide {
  margin-bottom: 0px; //increase this for your spacing between images
  .image-slide-anchor, .content-wrapper, .intrinsic-inner { 
    padding-bottom: 0 !important;
    height: 100% !important;
  } 
  .thumb-image, img {
    height: auto; 
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    display: block;
  }
  
  .sqs-video-overlay, .sqs-video-wrapper {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }
}

You need to use a collection like a blog to hold the images and descriptions and then use universal filter to make the filtering part work like this I did here https://www.motheruntitled.com/experts

In this site, the coaches are each a blog post and the popup is from the blog post content itself, the grid is the blog page but you can also do this with a summary block.

Universal filter is here (affilliate link...) https://www.bergendesign.co/universal-filter

@kodrury sorry! Got bogged down with client work. I don't think this is doable with just CSS alone. 

Try this in your page header code injection for js. This takes the name of the category in the URL and turns it into the class for the page so you have something different about this vs the main page. SS doesn't seem to change anything we can use to style the category pages easily.

<script>
  document.addEventListener("DOMContentLoaded", function() {
  var categoryURL = window.location.href;
  var index = categoryURL.lastIndexOf('/');
  var categoryClass = categoryURL.substring(index + 1);
  categoryClass = categoryClass.split("?")[0].split("#")[0];
  document.body.classList.add(categoryClass);
});
</script>

then for your sub pages do this but rename it based on your category names. For the /tex store it would be things like .health-leisure .kitchen .style .luxury .tech 

Any other type of character like the & will get removed and any spaces turned into "-"
 

.categoryName #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

You also have one of the background effects turned on. I think you need to turn that off for this to work.

Still says the site is private instead of password protected. Also your link when you share should end right after .com if we go to the /config part it’ll try to log us in as editors and no one here would have access. 

We'll need a link to your site and if it's still private set a site password so someone can take a look.

@kodrury you'll need to add a site password to your site so we can see it. https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

But also #collection-olemiss seems odd to me considering most of SS other selectors.

First, even with this library I don't think you can target things inside the iframe with JS directly like you're trying to do but secondly, this line here 

document.querySelector("#content") {padding: 0px !important;}

is javascript and won't do anything inside of style tags. I wonder if it's loading the library and trying to attach to your iframe before it's even on the page since it's loading in a lightbox after you click. On the plugin settings page you could try their code injection or maybe try preloading the popups, that one is just a checkbox in the setup page. If none of that works I'm not sure what else to do without really getting into the site. Feel free to dm me if youd like to chat about it!

@vcRBS it looks to me like the js file is loading just fine but it isn't working for some reason. The filename i guess could cause it but I dont think so. Not sure what it isn't working, maybe its the file on the other end that isn't working right.

Just out of curiosity see if this helps. Move the whole thing to the footer and change the init code to this. Maybe its taking too long to actually load the frame and the code runs before it even exists in the DOM? If that doesn't work, maybe use some code that waits until the #myIframe element exists. 

<script>
  window.addEventListener('load', function() {
    iFrameResize({ log: true }, '#myIframe')
  });
</script>

ahh right! Try changing the filename. I feel like the .min thing gets weird with those uploaded files. so no .min.js just .js at the end.

It sort of looks like everything is there. Without getting my hands dirty its hard to tell. In that support message they said to send a ticket or something, i would go with their support first and see if they can help

@TomJuice you could probably tweak this script to target the gallery reel selectors or just write something similar to this. 

@vcRBS that's the domain I'm referring to. You need to run code on the page that's inside the frame, i assume at that other domain, that recognizes how long it's own content is and sends something out to the parent site to adjust the height. Without being able to add code in your form you can't adjust this unless someone else here knows a workaround.

@AlfLager I dont see your url, can you post that? Can you make sure your code is live on the site even if it's not working?

@TomJuice try this one from @WillMyers https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71

This isn't something you can adjust without having code level access to the page that's inside the frame. Is this your own page or from a third party service? Sometimes they have a little checkbox hiding in that final screen to copy your code to make it responsive, I know that airtable does that but without something like that you can't adjust the size of the frame based on the content inside it.

@dorothy_gd I did this for another client. It's a ton of code to get it to work. DM me and we can chat about it if you want!

@TomKnowsNoCSS I would do this with some media queries at different breakpoints, most likely just 640px and under. Change your CSS to this and adjust those font sizes below. You can copy and paste the media query and change the size to something else 767px 500px 320px etc.

a#site-title {
  &:after {
    content: "bespoke wedding stationery";
    display: block;
    font-size: 1.3rem;
    font-family: 'Garamond';
    letter-spacing: 3px;
    line-height: 1.3rem;
  }

  //change these font sizes or add different pixel widths as needed
  @media only screen and (max-width: 640px) {
    font-size: 20px !important;
    &:after {
      font-size: 1rem;
    }

  }
}