CSS Code visible in mobile view

Site URL: https://hen-plum-sz8a.squarespace.com/

Hi! 

I have been working with CSS in order to create a text overlay in my simple grid gallery. It worked but now, if I narrow down my browser or if I open the website in mobile view, the CSS code is displayed at the top (see attached screenshots). Does anyone know how to make this invisible? Thanks in advance!!

Daniel

Hi. What is access password?

On 6/11/2022 at 10:24 AM, tuanphan said:

Hi. What is access password?

Password: soundwise

Thanks!!

Access Settings > Advanced > Code Injection > Header or Footer > Find & remove the text in screenshot.

Hi!

I checked but there is no content in header or footer code injection (see screenshot). Here is the code that I entered in Design --> Custom CSS:

html {

scroll-behavior: smooth;

}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption a {
  color: white; /* color of the caption text */
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}

Perhaps there is a mistake here?

Found it! Thanks so much! 

I had another question, I used codeblocks throughout the homepage to create a single page website and used links to let the navigation scroll down to the specific sections. For some reason, this doesn't always work: sometimes clicking the navigation link doesn't do anything, sometimes the page refreshes and then scrolls down to the section. Is there a way to make the single page website work flawlessly? You can see the codeblock I used in the attached screenshot. I use /home#team (for example) to link to the specific codeblocks.

And I would love to be able to have more than 6 columns in the simple grid image gallery on the homepage. Is it possible to do 10? Thanks so much for you help!

15 hours ago, daankist said:

And I would love to be able to have more than 6 columns in the simple grid image gallery on the homepage. Is it possible to do 10? Thanks so much for you help!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

On 6/21/2022 at 8:41 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

 

I've added this to Design > Custom CSS but nothing appears to be happening to my gallery? See attached screenshot:

40 minutes ago, daankist said:

I've added this to Design > Custom CSS but nothing appears to be happening to my gallery? See attached screenshot:

Try save & reload your site. If it still doesn't work, try move the code to top of Custom CSS box

If it still doesn't work, add & keep the code in Custom CSS, we can check easier

Thanks for your swift reply! Still doesn't work unfortunately, I saved and reloaded and moved the code to the top of the box. 

Also, I posted this question:

On 6/20/2022 at 4:58 PM, daankist said:

Found it! Thanks so much! 

I had another question, I used codeblocks throughout the homepage to create a single page website and used links to let the navigation scroll down to the specific sections. For some reason, this doesn't always work: sometimes clicking the navigation link doesn't do anything, sometimes the page refreshes and then scrolls down to the section. Is there a way to make the single page website work flawlessly? You can see the codeblock I used in the attached screenshot. I use /home#team (for example) to link to the specific codeblocks.

Do you maybe have a solution for this issue? Thanks for all your help!

20 hours ago, daankist said:

Thanks for your swift reply! Still doesn't work unfortunately, I saved and reloaded and moved the code to the top of the box. 

Also, I posted this question:

Do you maybe have a solution for this issue? Thanks for all your help!

You can keep the code in Custom CSS, then let me know. We can check it again easier

This is the current Custom CSS:

@media screen and (max-width:767px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

html {
scroll-behavior: smooth;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption a {
  color: white; /* color of the caption text */
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}

Use this new code

@media screen and (min-width:768px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

Fantastic! It worked! Thank you.

I had one last question:

I used codeblocks throughout the homepage to create a single page website and used links to let the navigation scroll down to the specific sections. For some reason, this doesn't always work: sometimes clicking the navigation link doesn't do anything, sometimes the page refreshes and then scrolls down to the section. Is there a way to make the single page website work flawlessly? You can see the codeblock I used in the attached screenshot. I use /home#team (for example) to link to the specific codeblocks.

soundwise

https://hen-plum-sz8a.squarespace.com/

It looks fine to me. Did you solve it?