daankist Posted June 8, 2022 Share Posted June 8, 2022 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 Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 Hi. What is access password? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
daankist Posted June 12, 2022 Author Share Posted June 12, 2022 On 6/11/2022 at 10:24 AM, tuanphan said: Hi. What is access password? Password: soundwise Thanks!! Link to comment
tuanphan Posted June 13, 2022 Share Posted June 13, 2022 Access Settings > Advanced > Code Injection > Header or Footer > Find & remove the text in screenshot. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
daankist Posted June 18, 2022 Author Share Posted June 18, 2022 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? Link to comment
Solution tuanphan Posted June 20, 2022 Solution Share Posted June 20, 2022 Try find in Page Header Access Pages > Main Navigation > Hover All pages > Click Gear icon > Advanced > Look at right box Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
daankist Posted June 20, 2022 Author Share Posted June 20, 2022 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. Link to comment
daankist Posted June 20, 2022 Author Share Posted June 20, 2022 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! Link to comment
tuanphan Posted June 21, 2022 Share Posted June 21, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
daankist Posted June 22, 2022 Author Share Posted June 22, 2022 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: Link to comment
tuanphan Posted June 22, 2022 Share Posted June 22, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
daankist Posted June 22, 2022 Author Share Posted June 22, 2022 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! Link to comment
tuanphan Posted June 23, 2022 Share Posted June 23, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
daankist Posted June 23, 2022 Author Share Posted June 23, 2022 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
tuanphan Posted June 24, 2022 Share Posted June 24, 2022 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
daankist Posted June 27, 2022 Author Share Posted June 27, 2022 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. Link to comment
tuanphan Posted June 30, 2022 Share Posted June 30, 2022 soundwise https://hen-plum-sz8a.squarespace.com/ It looks fine to me. Did you solve it? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment