7TK

Amazing! Thank you again, Lesum!! 👍

@7TK Great! Here's the updated code. You can remove the previous code and add this one:
#collection-64f79ac25b5b893aaa092e3a { .field.first-name .caption-text { visibility: hidden; } .field.first-name .caption-text:before { visibility: visible; content: "Nombre"; } .field.last-name .caption-text { visibility: hidden; } .field.last-name .caption-text:before { visibility: visible; content: "Apellidos"; } .address .field:nth-child(n+1) .caption-text { visibility: hidden; } .address .field:nth-child(2) .caption-text:before { visibility: visible; content: "País"; } .address .field:nth-child(4) .caption-text:before { visibility: visible; content: "Dirección Línea 1"; } .address .field:nth-child(6) .caption-text:before { visibility: visible; content: "Dirección Línea 2"; } .address .field:nth-child(8) .caption-text:after { visibility: visible; content: "Ciudad"; } .address .field:nth-child(9) .caption-text:after { visibility: visible; content: "Provincia"; } .address .field:nth-child(10) .caption-text:after { visibility: visible; content: "Código Postal"; } span.description.required { visibility: hidden; } span.description.required:before { visibility: visible; content: "(obligatorio)"; } }

@7TK You can try adding this code snippet under Custom CSS panel:
#collection-64f79ac25b5b893aaa092e3a { .field.first-name .caption-text { visibility: hidden; } .field.first-name .caption-text:before { visibility: visible; content: "Nombre"; } .field.last-name .caption-text { visibility: hidden; } .field.last-name .caption-text:before { visibility: visible; content: "Apellidos"; } .address .field:nth-child(n+1) .caption-text { visibility: hidden; } .address .field:nth-child(2) .caption-text:before { visibility: visible; content: "País"; } .address .field:nth-child(4) .caption-text:before { visibility: visible; content: "Dirección Línea 1 (required)"; } .address .field:nth-child(6) .caption-text:before { visibility: visible; content: "Dirección Línea 2"; } .address .field:nth-child(8) .caption-text:after { visibility: visible; content: "Ciudad (required)"; } .address .field:nth-child(9) .caption-text:after { visibility: visible; content: "Provincia (required)"; } .address .field:nth-child(10) .caption-text:after { visibility: visible; content: "Código Postal (required)"; } } This code will convert the form field input labels (first name, last name, country, address line 1, address line 2, city, state, and zip) from English to Spanish, but it will only affect the page you shared in your post.
Let me know how it goes. Thanks! 

Thanks so much, @tuanphan! 👍 That fixed it! 😀

Add to Design > Custom CSS
/* Show marquee text */ .Marquee { overflow: visible !important; } svg.Marquee-svg { overflow: visible !important; }  

Wow - this worked immediately!  Thank you SOOOOO much, creedon!  😀

Replace, make a copy somewhere, your CSS with the following.
<style>   div#canvasWrapper {        background-image : url( https://static1.squarespace.com/static/53514fd4e4b095a1b0b3a6bb/t/62d56f6fb8e3714244383a66/1658154863809/Dark+Green-2.png );     background-position : center center;     background-size : cover;     background-repeat : no-repeat;          }        .ctrl-button .icon-hamburger:before,   h1.logo.logo-image,   h2.logo-subtitle,   nav.main-nav        {            -webkit-filter : invert( 100% );       filter : invert( 100% );              }          .sqs-mobile-nav-open .ctrl-button .icon-hamburger:before {        -webkit-filter : unset;     filter : unset;          }        form,   p        {            color : #fff8dc;              }          </style> This is for v7.0 using the Forte template and specific to the poster's need.
Let us know how it goes.

Add to Design > Custom CSS
@media screen and (max-width:640px) { body#collection-62896865f236c476d5d8b0e0 div#canvasWrapper { height: 100vh; } }  

It looks fine to me. Can you take a screenshot & explain?

Add to Design > Custom CSS
@media screen and (min-width:1920px) { div#block-yui_3_17_2_1_1652133655209_1816 .slide { width: 16.6666% !important; clear: none !important; } div#block-yui_3_17_2_1_1652133655209_1816 .slide:nth-child(6n+1) { clear: left !important; }}  

Update: I was able to resolve the additional problems mentioned above by using the following code posted by @dvgdvgdvg 
Thank you @tuanphanand @dvgdvgdvg!
@media screen and (min-width:768px) and (max-width: 1024px) { .blog-basic-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-column-gap: 40px !important; } .blog-basic-grid .blog-list-pagination { grid-column-end: 3 !important; } }

I actually just finally found the cause! It was the pagination links that were breaking the layout. I changed the "grid-column-end" setting on the pagination (from 4 to 3) and now it works perfectly. Here's the CSS in case it's helpful for anyone else:
@media screen and (min-width:768px) and (max-width: 1024px) { .blog-basic-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-column-gap: 40px !important; } .blog-basic-grid .blog-list-pagination { grid-column-end: 3 !important; } }  

Insert once, It will work all projects. Add to Design > Custom CSS
@media screen and (max-width:767px) { h2.item-pagination-title { font-size: 12px !important; } }  

You can use this code in place of what you have but try it out on one page first. It worked on my 7.1 lab site. It requires a markdown block on any page you want it to work with. Don't put it in the footer of a page. It won't work there. 
<style>
.back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>

<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;
function addClass(el, className) {
    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }
}
function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

Hi, i just write a code for your request. please apply it on your CSS editor
@media (min-width:751px) and (max-width:1024px) {
    .blog-basic-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

Add to Design > Custom CSS
/* hide 1 lightbox caption */ body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description { display: none; }  

This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post. They are:
transition: opacity 0.1s ease-out; .gallery-lightbox-item[data-in=false] .gallery-item-description {   opacity: 0; } Special note to those who mentioned the issue: @kinapark , @IvanOB , @ed.design , @JohnS123

<script> document.addEventListener("DOMContentLoaded", function() { function render(checked, index) { (function(p, show) { var map; var values; var messageValue; var messages; var name; var type; var k; map = document.querySelectorAll(p ? p : 'section.gallery-section,\x20.gallery-lightbox'); name = map.length; for (; name--;) { values = map[name].querySelectorAll(show ? show : '[class*=\x27-item\x27]:not([class*=\x27item-\x27])'); type = values.length; for (; type--;) { messageValue = values[type].getElementsByTagName('img')[0]['alt']['trim'](); if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false) { messages = document.createElement('div'); messages.className = 'gallery-item-description'; messages.textContent = messageValue; values[type].appendChild(messages); } } } })(checked, index); } render(); }); </script> Here is an deobfuscated version of the original script. It works the same but is much more human readable. It also does not include image file names if they end in "png" or "jpg."

Thank you, bangank36!  I will look for the javascript solution in that thread. 🙂  I may ask for clarification if I run into any difficulty!

It will be easier to use javascript since it will help fetching the caption from the image/slide, that you can edit the text directly in editor. 
But there is a trick that require more effort from you to find the slide id and manually adding the caption into custom css. Each slide has unique id that can be used to target like so

For js solution, join this topic for previous answer
 

Hello All,
I've been reading earlier threads on how to make captions appear when viewing gallery pics in lightbox view. 

I'm wondering if injecting special code into my gallery page header is the only way to achieve this.  If so, I'll need to upgrade to a business plan. (I'm currently on a personal plan in 7.1.)

I just want to be sure this is the only way to do this, before I go ahead and change plans.

Thanks for any help you can provide!

Sincerely,
7TK
 

Add to Design > Custom CSS
/* mobile */ @media screen and (max-width:767px) { /* hide video */ [data-section-id="60ad671deb90291962e54ad5"] .section-background div { visibility: hidden; } /* set new image background */ [data-section-id="60ad671deb90291962e54ad5"] .section-background { background-image: url(https://cdn.pixabay.com/photo/2021/06/21/20/15/bee-6354562__340.jpg); background-size: cover; background-repeat: no-repeat; background-position: left center; } }  

You mean this section? 
“The unchanging beauty of God brings a joy surpassing all the most desired pleasures of earth.”

Hi. Q1 Possible. Can you share site url? We can give some code to achieve this.
Or you can add 2 section with video background - image background. We can give the code to show video on desktop, show image on mobile