Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

Currently working on a one-page landing page using Squarespace and running into some issues with creating a slideshow. You can check out my website here (the slideshow is located at the bottom of the page):

Squarespace provides default options for text positioning, but only as overlays on images. I'm looking to have the description text for each image displayed at the top like a title.

I came across a similar question online, but the suggested CSS code isn't working for me (I'm just starting to learn CSS...)

Thank you in advance for any assistance you can provide!

Answer №1

The functionality to display image descriptions as overlays is already included in Squarespace by default, unless I have misunderstood your query. To activate this feature, simply check the box in the Gallery Block settings and ensure that your images are accompanied by descriptions. For more information, you can visit the following link:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

interacting with data tables using a jQuery selector or through an application programming

I encountered a problem like the following: First, I attempted to initialize the datatable as shown below: var oTable = table.dataTable(); Although my script ran well, I found that I couldn't use the datatables ajax reload function. oTable.ajax.rel ...

Dealing with issues regarding the rendering of events in FullCalendar when utilizing the .getJSON() method from

I'm facing some difficulties when trying to render an event in the month view of FullCalendar. Below is the code snippet that makes a .getJSON call from the razor page, followed by the JsonResult returned by the controller and the object displayed in ...

Move the internal array pointer forward to the next record in order to apply the insertAfter function within the jquery code

As a new jQuery user, I'm attempting to develop a jQuery function using data provided by PHP. My goal is to arrange DIV elements in order of their values using insertAfter method. However, I seem to be encountering some difficulty in advancing the poi ...

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

The functionality of IE's .attr disabled feature appears to be ineffective

My function to check if a product is available overnight is not functioning properly in Internet Explorer, although it works fine in other browsers. function checkOvernight() { id = $_2("[name='product']").val(); if(id.length > 0) { ...

Allowing Users to Easily Copy CSS ::before Content

Text inserted via pseudo-elements like ::before and ::after cannot be selected or copied. Is there a way to change this behavior? span::before { content: "including this text"; } <p> When the text of this paragraph is selected and copied, ...

Element failing to adhere to CSS grid layout

I am currently working with grid layout and aiming to position the following content at the bottom and center, but it is currently aligning to the left: .body { margin: 0; background-color: rgb(255, 237, 237); display: grid; grid-template-rows: ...

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

Exploring the functionality of JavaScript's concat method

I am trying to retrieve value1, value2, value3... but I am encountering an issue. Why am I getting this error message - "can't access property "concat", texto1 is undefined"? Please assist me! Here is the HTML code snippet: <div id=ite ...

Internet Explorer reverts back to default fonts once the webpage has completed loading

I'm encountering a minor problem with a website I'm currently working on. My CSS and web fonts are from Fonts.com, and everything seems fine except in Internet Explorer. Initially, the page displays with the fonts correctly applied, but once the ...

Creating a Stylish CSS Table Utilizing DIV Elements: Preventing the Top Row from Scrolling

Utilizing a pure DIV table with the display: table, table-row, table-cell format for styling, I have managed to make the entire table scroll except for the header row. However, I am in search of methods that can prevent the header row (1st row) from scroll ...

Display content exclusively within a modal specifically designed for mobile devices

I want to implement a feature where a button triggers a modal displaying content, but only on mobile devices. On desktop, the same content should be displayed in a div without the need for a button or modal. For instance: <div class="container&quo ...

What is the best way to fit the text into a DIV row as efficiently as possible?

Looking for a solution to prevent a span from dropping down to the next line when text is too long within a fixed width and height row. The row consists of three elements, two with fixed widths and the third containing a span and text. Constraints include ...

Enhancing User Interactivity with JQuery Ajax Voting

Currently, I am referencing a JQuery Ajax Voting system guide to help me set up a similar system. However, I have concerns about the security aspects of this guide. As it stands, the guide simply stores the ID of an item and its corresponding voting statis ...

Activate onbeforeunload when the form is not submitted

Currently, I have a form that is submitted using PHP with three different submit actions: Save and Continue Save and Exit Exit without Saving The goal is to trigger an "OnBeforeUnload" alert if the user does not click on any of the form actions. This al ...

What is the solution to having a div move along with window resizing without displacing adjacent divs?

After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...

Developing components through JavaScript

I am attempting to use JavaScript to create an element in my HTML using createElement, but there seems to be an issue in my code. HTML <button class="test_button">I am a test</button> <div class="test"></div> ...

Retain the jQuery dropdown menu in an open state while navigating to a different webpage on the

I am encountering an issue with a drop-down menu on my website. Whenever I click on a submenu link, the new page opens but the menu automatically closes. However, I want the active menu to remain open even on the new page. To solve this problem, I believe ...