-
Posts
133 -
Joined
-
Last visited
-
Days Won
1
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Agha_Waqas
-
-
did you apply my code? i did not see my code in CSS
-
Hi, add below code into CSS editor
@media (min-width: 768px) {
#page-section-62975a23c3e91f4d2b20fc5e .span-5 {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 13%;
}
} -
11 hours ago, dariokomazec said:
Hi,
I'm not good at coding so any help will be appreciated.
I want to change the default SEARCH link to external one and I have done this successfully with this code below but the problem is I don't know how to force it to open in a new tab. I have tried adding the target= "_blank" to the code but as I already said I'm not good at this so no luck, I don't know how to do this...
<script> $(document).ready(function() { $('a[href="/search"]').attr('href','https://www.google.com/'); }); </script>
So I need help with this code above, code is 100% working I only want to open the https://www.google.com/ in the new tab...
Thanks
same thing you need to do via jquery. Add target attr like you add the href.
$('a[href="/search"]').attr("target", "_blank");
-
1 hour ago, pbueno24 said:
Booyah! Thank you for a quick solution!
Your Welcome.
-
38 minutes ago, Ginger_Meadow_08 said:
Is there a way to have an image interactive where you can click on multiple parts of the image like a map? I have an image that has multiple spots we would like to have linked to a separate page.
Hi, yes we can do that, Will you inbox me the image so i will see. though we can create that functionality with Custom Code (hmtl, css and js)
-
1 hour ago, schamberlain said:
Site URL: https://spencerchamberlain.net/workforpeople
Running into an issue where on mobile, my horizontally scrolling galleries are displaying in a way that leaves most of the screen as negative space, and is pretty unpleasant to look at. It looks great on desktop, but if there's a way I can force these kind of galleries to behave in the way a vertical gallery block would, I'd prefer to do that. Example images of what it should look like compared to what it currently displays.
Hi, i just write a code for your request, please applied below code into CSS editor and see if that works, for you,
@media (max-width: 520px) {
#block-yui_3_17_2_1_1636053602153_275376 {
.sqs-intrinsic {
padding-bottom: 20px !important;
.sqs-intrinsic-content {
height: auto !important;
position: relative !important;
.sqs-wrapper {
width: 100% !important;
heeight: auto !important;
display: flex !important;
flex-direction: column;
.sqs-gallery-design-strip-slide {
margin-bottom: 10px !important;
}
}
}
.sqs-gallery-controls {
display: none !important;
}
}
}
} -
13 minutes ago, 7TK said:
Site URL: https://www.frjohnharvey.com/featured-articles
Hello - I'd be grateful for some guidance. 🙂 I've added a page to my site which has four grid blocks per row when viewed on a desktop - that's fine. When viewed on a phone, there's just one block per row and that's fine too.
What I'd like to do is add custom css (I'm on a personal plan) which shows only two blocks per row when the page is viewed on devices that have a minimum width of 768 px and a maximum width of 1024 px.
I've tried following some of the coding already provided in these forums, but I must be doing something wrong, because I can't get it to work.
Thank you in advance!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;
}
} -
1 hour ago, pbueno24 said:
Site URL: https://pte.squarespace.com/ourwork
Hey,
I would like to change the order of the Blog-Title and Blog-Excerpt within the HTML. I managed to do so using the developer tools, but how would I swap their order within Squarespace / is this even possible? I've attached an image to show what I'm going for. The left side of the image is what I'm trying to achieve. Thanks!
Hi you can do this via CSS. Add below code into CSS editor
[data-section-id="614251ce615b993943a8acb9"] .blog-basic-grid--text { display: flex; flex-direction: column-reverse;} -
59 minutes ago, MadcapCreative said:
Site URL: https://caillouxcheeseshop.squarespace.com
Hi y'all!
I have scrolling text on my homepage and it is making the width of the page really wide, as long as the text, on both desktop and mobile view. If you swing to the right, you just see the scrolling text. Is there any way to change this?
caillouxcheeseshop.squarespace.com
ps: CAILLOUX
Thank you to every contributor that has helped answer questions here. I've learned so much in this forum--and this is my first time actually posting!
Hi, you can do this via overflow hidden property of that section below is the code you can copy paste code into CSS editor
[data-section-id="61841fb973f9a25df25f5cb4"] { overflow: hidden !important;} -
Hi. You need to add a piece of javascript code for that.
-
Hi. Will you share the Password of your website.
you need to use the z-index for that.
add the z-index:9999; within your code. It will work.- Beyondspace and EarvinChong
- 2
-
1 minute ago, Agha_Waqas said:
same code i just its working
https://sponge-keyboard-cc4n.squarespace.com/
pwd: demo
I applied code without JavaScript code.
Remove the JavaScript code.also apply the style code into the CSS editor.
-
same code i just its working
https://sponge-keyboard-cc4n.squarespace.com/
pwd: demo
I applied code without JavaScript code.
Remove the JavaScript code. -
2 minutes ago, S74 said:
Site URL: https://www.gagroup.co.nz/accessible-bathroom
Hello I tried to use this code: https://codepen.io/shshaw/pen/WXMdwE on my website here: https://www.gagroup.co.nz/accessible-bathroom but the animation and tick isnt working. Does anyone know why?
Here's the code:
<svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;"> <defs> <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25"> <stop offset="0%" stop-color="#bfd788"/> <stop offset="100%" stop-color="#84BD00"/> </linearGradient> <linearGradient id="lineGradient"> <stop offset="0%" stop-color="#bfd788"/> <stop offset="100%" stop-color="#84BD00"/> </linearGradient> <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path> <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path> <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path> <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle> </defs> </svg> <div class="todo-list"> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">1. What bathroom activities require a user to need assistance?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">2. Are there medical supplies necessary and where do they need to be placed?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">3. Is a tub or shower preferred?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">4. What activities does a user do independently where grab bars should be placed?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">5. Will users condition deteriorate over time and what will users needs be in the future?</div> </label> </div> <style> @duration: 0.8s; .todo-list { background: #FFF; font-size: 1.1rem; max-width: 33em; margin: auto; padding: 0.5em 1em; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); } .todo { display: block; position: relative; padding: 1em 1em 1em 16%; margin: 0 auto; cursor: pointer; border-bottom: solid 1px #ddd; &:last-child { border-bottom: none; } } .todo__state { position: absolute; top: 0; left: 0; opacity: 0; } .todo__text { color: saturate(#1B4A4E,15%); transition: all @duration/2 linear @duration/2; } .todo__icon { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; margin: auto; fill: none; stroke: #27FDC7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .todo__line, .todo__box, .todo__check { transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1); } .todo__circle { stroke: #27FDC7; stroke-dasharray: 1 6; stroke-width: 0; transform-origin: 13.5px 12.5px; transform: scale(0.4) rotate(0deg); animation: none @duration linear; //cubic-bezier(.08,.56,.04,.98); @keyframes explode { //0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); } 30% { stroke-width: 3; stroke-opacity: 1; transform: scale(0.8) rotate(40deg); //animation-timing-function: cubic-bezier(.89,.01,.95,.51); } 100% { stroke-width: 0; stroke-opacity: 0; transform: scale(1.1) rotate(60deg); //animation-timing-function: cubic-bezier(.08,.56,.04,.98); } } } .todo__box { stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0; transition-delay: @duration * 0.2; } .todo__check { stroke: #27FDC7; stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995; transition-duration: @duration * 0.4; } .todo__line { stroke-dasharray: 168, 1684; stroke-dashoffset: 168; } .todo__circle { animation-delay: @duration * 0.7; animation-duration: @duration * 0.7; } .todo__state:checked { ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; } ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; } ~ .todo__icon .todo__line { stroke-dashoffset: -8; } ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; } ~ .todo__icon .todo__circle { animation-name: explode; } } html { background: #ddd; } html { height: 100%; display: flex; } body { width: 100%; margin: auto; }</style> <script>console.clear(); setTimeout(function(){ document.querySelector('input[type="checkbox"]').setAttribute('checked',true); },100); /* // Javascript was initially used, but wasn't really necessary. Javascript droppped, but left here for archival purposes. var todoTemplate = function(id){ return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon"> <defs> <mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0"> <g stroke="#FFF" fill="none"> <path class="todo__line" d="M21 12.3h168"/> <path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/> <path class="todo__check" d="M10 13l2 2 5-5"/> </g> </mask> </defs> <rect fill="url(#todoGradient)" mask="url(#myMask${id})" width="100%" height="100%" /> <circle class="todo__circle" cx="13.5" cy="12.5" r="10" /> </svg>` }; var todos = [ ...document.querySelectorAll('.todo') ].forEach(activateTodo); function offsetPath(path, offset){ var length = path.getTotalLength(); path.style.transition = 'none'; path.style.strokeDasharray = length + ' ' + length + offset; path.style.strokeDashoffset = length; setTimeout(function(){ path.style.transition = null; },20); return length; } function togglePath(path, toggle, offset = 0){ var length = offsetPath(path, offset); function updatePath(toggle){ return path.style.strokeDashoffset = ( toggle ? -offset : length ); } updatePath(toggle); return updatePath; } function activateTodo(todo, i){ todo.insertAdjacentHTML('afterbegin', todoTemplate(i)); var line = todo.querySelector('.todo__line'), updateLine = togglePath(line, false, 4); var box = todo.querySelector('.todo__box'), updateBox = togglePath(box, true); var check = todo.querySelector('.todo__check'), updateCheck = togglePath(check); var toggle = false; todo.addEventListener('click', function(){ toggle = !toggle; updateLine(toggle); updateBox(!toggle); updateCheck(toggle); if ( todo.classList ) { todo.classList[ toggle ? 'add' : 'remove' ]('todo--checked'); } }); } */</script>
hi. i just review the code. sometimes i also faces this problem due to the variable they took.
@duration: 0.8s;
May be that will be the issue. you need to add 0.8s to each code where it uses that variable. give it a try. -
25 minutes ago, skycircle said:
Site URL: https://crocodile-iris-lkc9.squarespace.com/
Hi there, wondering if anyone can help me. My site is looking fine on desktop view, but when I switch to mobile view the text at the bottom of the home page overlaps as per the image attached/below. If anyone knows how to stop this from happening it would be greatly appreciated.
Website is at https://crocodile-iris-lkc9.squarespace.com/ password is ossian01 if you need it.
Thanks!
hi i just reviewed your website and it seems like your custom code is conflicting this.
below is the code which created the issue,
#page .page-section:nth-of-type(12) {
min-height: 20vh !important;
height: 45vh;}
Remove it and it will resolved. -
-
7 hours ago, Rolaa said:
Hello Agha_Waqas,
I have the same problem, but the code that's blocking it must be different because I couldn't find it in my code... Can you help?
The page where the summary images don't work as clickable links is:
https://www.thecarolamoon.com/projects
Thank you heaps! CarolaHi. i review it and it seems like the custom code is blocking it.
please remove below code from your CSS editor.
.summary-thumbnail-container {pointer-events: none !important;
} -
2 hours ago, francescalo said:
Site URL: https://www.flocdesign.com/home-2
Hi, I would like to have my gallery slide show visible under the header.
Basically I do not want to see the white background in the header, but the slideshow.
link: https://www.flocdesign.com/home-2
exactly like in the image attached.
Can someone help?
Thank you
Francesca
Hi, You need to remove the top padding of the section. below is the code.
[data-section-id="611d47af4095211195eef4f4"] { padding-top: 0 !important; }- tuanphan and francescalo
- 1
- 1
-
-
2 hours ago, livie_kor said:
Site URL: http://pineleafcrystals.co
Website link: pineleafcrystals.co/shop
Is it possible to make the quick view button see through or white and smaller so it doesn't block so much of the image? I'm having some difficulty changing it on my own.
hi, you can use below code into CSS editor to make the quick button and font size small.
.sqs-product-quick-view-button { padding: 8px !important; font-size: xx-small !important;} -
45 minutes ago, TrueNatureDreams said:
Site URL: https://www.truenaturedreams.com/shop
Hi guys, please help! I'd really appreciate it!
I added some code to create a 'scroll to top' button on my site, which I was really happy with.
But I've just added a Store page and when I did a test sale the 'add to cart' button has merged and become the 'scroll to top' button, so customers can't view their cart or complete check out!
I tried just deleting the original CSS/code for 'scroll to top' button, so it doesn't cause any conflict but can't find out where it is on my site, I did it so long ago!
Can anyone please help? I can't sell items through my store until I can fix this!
Thank you, Becs 🙂
Hi, You can simply add spacing between the "cart icon" and "back to top" buttons by following below code. so both buttons show on the bottom right corner with no mess.
.floating-cart {bottom: 80px !important;}or if you want to remove the "back to top" the code will be in the Header code injection. go to settings> advance > code injection
-
26 minutes ago, Katie_B said:
Site URL: https://pumpkin-strawberry-tcz5.squarespace.com
https://pumpkin-strawberry-tcz5.squarespace.com
PASSWORD: kb
Hello.
I've added a full width underline on my header, but it gets hidden on the mobile menu overlay.
I'd like to know if there's way to keep the underline on the mobile overlay menu too.
Thanks, Katie.
Hi, yes you can add it by using below code into CSS editor
.header-menu--folder-list .header-menu-nav {
border-top: 1px solid #000 !important;
} -
15 hours ago, camilla_ksd said:
Thank you for checking it out, @Agha_Waqas! 🙂
When I look at the code in the code block the space doesn't show up. It just looks exactly like this:
<a href="#" data-featherlight="#bio-nan"></a>
Am I looking in the wrong spot since I can't find the </div> part that you see in the source code? Or could there be any other reason why it's hidden?
Thank you so much for your time and help!
ahh yes maybe you are seeing on wrong one. please check this "Malcolm DeFils" this team member and onwards.
-
4 hours ago, camilla_ksd said:
Site URL: https://www.ahc-oakland.org/team
I've build this page (https://www.ahc-oakland.org/team) with several different code blocks, but for some reason the code block under the second image (Nan) makes everything below it jump down on the page. I cannot seem to figure out why!
Any help would be appreciated! 🙂
Thanks!
hi. i just check the source code it seems like the div you hide, it have space after the anchors tag,below is a code which is show in inspect element
<a href="#" data-featherlight="#bio-nan"></a> </div>
Remove this space it will fix.
Sticky Text Block (that's within a section)
in Customize with code
Posted
@kaydotjpg opps sorry the code was wrong. please replace the span-5 to span-1. code will work