Jump to content

CSS Code visible in mobile view

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 16
  • Views 674
  • Created
  • Last Reply

Top Posters In This Topic

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?

 

 

 

Screen Shot 2022-06-18 at 17.39.34.jpg

Link to comment

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.1997327676_ScreenShot2022-06-20at16_52_34.thumb.jpg.75f797f39e7eb2ee8be897c4e413a841.jpg

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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:

image.thumb.jpeg.da1901cb45306bd61b8c8a5e89240448.jpeg

Link to comment
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:

image.thumb.jpeg.da1901cb45306bd61b8c8a5e89240448.jpeg

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.1997327676_ScreenShot2022-06-20at16_52_34.thumb.jpg.75f797f39e7eb2ee8be897c4e413a841.jpg

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;
}

 

Link to comment

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.1997327676_ScreenShot2022-06-20at16_52_34.thumb.jpg.75f797f39e7eb2ee8be897c4e413a841.jpg

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.