Roguetattoopgh

This should work for you. .image-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px; } .image { width: 100%; height: auto; object-fit: cover; /* Preserve aspect ratio */ }

Could you please provide the website link? It will be easier to help.

First you'll need a container for your images, so let's start there. <div class="image-container"> <img src="your-image.jpg" alt="Your Image"> <div class="image-overlay"> <a href="#">Overlay Link 2</a> <a href="#">Overlay Link 1</a> <!-- Add more links as needed --> </div> </div> The links are in reverse order, so your first link will always be second. This should produce the desired result, more or less. /* Styling for container */ .image-container { position: relative; display: inline-block; } /* Styling for image */ .image-container img { opacity: 0.6; transition: opacity 0.3s ease-in-out; } /* Styling for text */ .image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-end; opacity: 0; transition: opacity 0.3s ease-in-out; background-color: rgba(0, 0, 0, 0.6); /* Overlay Color */ padding: 10px; box-sizing: border-box; } /* Styling for the overlay text links */ .image-overlay a { color: white; text-decoration: none; margin-right: 10px; } /* Hover effect */ .image-container:hover img { opacity: 1; } .image-container:hover .image-overlay { opacity: 1; }

You'll need to sign up to get an API key. You need to decide which API you want to use (gpt 3, etc) You'll need a script for initiliatizing the chatbot and integrating the API calls, then you'll need a script for integrating the resulting chat interface into a website.

Were you able to fix it? I'm not seeing the issue in browser or on my mobile.

I could be crazy here but can't you just add custom css for overriding the style? .sqs-block-content { height: some_value; min-height: some_value; max-height: some_value; } if the item is a link it should be .sqs-block-content a { } if squarespace refuses to give up the goose, you can try to force it by adding !important to the end of the value string, so height: 100px!important;

Yes, you can target links directly based on their destination, and apply custom code to them. .header-nav-item a[href="/yourslug"], .header-menu-nav-item a[href="/yourslug"] { // * Custom code goes here * // }