joseph81

You have 2 problems. A specificity issue is the first problem(you have an important on the pr button color) and the second is you target only the main navigation(using the wrapper class). Solution: Use !important to override the other !important on the book a pr chat link and also remove the wrapper class and add the #header id for bigger specificity: #header :not(.header--menu-open) a { color: var(--navigationLinkColor)!important; }

Then just add another a selector before the img selector: a img:hover {transform: scale(1.1); transition: .4s;} a img{transform: scale(1); transition: .4s;}

Could you insert here your website's url? What do you mean by length? You mean the duration of the video or the height? Or you are actually referring that even if you change the width of the video container the inner video has black around it on the inside.

So you actually need anchor Links but organized in a dropdown menu in the main navigation?

This will be hard to debug because I don't know whick block id represents the footer section on the right. But as I guess you're problem is related to : position: relative; top: -27px !important; You could reduce the negative top, or take out the overflow hidden by writing overflow:visible. But since I can't inspect and identify what element is what on the screen this is just a guess.

Oh, it seems I don't have access to your site ! It is private.

Could you share also the url for this website?

Hi. Can you provide your website url (and password if needed) ?

Hi. I wrote recently a blog article about implementing a tarot card random show when clicking on a button. Maybe it helps. https://www.ui-workarounds.com/random-tarot-cards-on-a-click-of-a-button-using-svg-sprites/

No, I meant you need to reset the clip-path rule in css. [data-section-id="635cabf5c1c7b62bd3d9835e"] .fluid-image-container { border-radius: 50%; overflow: hidden; outline: 4px solid #ffff; clip-path: none!important; }

[data-section-id="635cabf5c1c7b62bd3d9835e"] .fluid-image-container { border-radius: 50%; overflow: hidden; outline: 4px solid #ffff; } Also you need to remove the clip-path from the fluid-image-container !

Hi. I'm not sure if I understood it correctly. So you want that grey circle to not appear when you hover? Or you want the entire block to become green (also the grey circle around the icon) ?

Hi. So what is the website URL or website name?

Sometimes this is resolved by removing the space inside the brackets on line 2 (between the brackets and reading the enter(return). I personally don't see any error there, so maybe you copy pasted that part and some space characters were carried over. You could try to add an enter before the html selector too.

It could be done but it requires many changes !

Well to continue with the beforehand started background... that would be much more work I guess, but to start again the same background as the previous section had, that is easier: const prevBgSrc = document.querySelector('#content .index-section:last-child img').src; document.getElementById('footer').style.backgroundImage = `url(${prevBgSrc})`;

You could use a media query and overwrite some width properties: @media (max-width: 767px) { .gallery-masonry { padding: 0!important; img { width: 100%!important; } .gallery-masonry-item { width: 100%!important } } }

This is the solution for this section: [data-section-id="62c33c4562158217bb0e2faa"] { position: relative; &::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: linear-gradient(transparent 77%, var(--siteBackgroundColor) 100%); z-index: 1; } }

I looked in a simulator of mobile device in chrome, maybe that's the reason I did not see the problem with captions. This is my android phone with the caption below:

Sorry there was a typo in my code, this is the correct version: @media (max-width: 767px) { .gallery-grid-item img { object-fit: cover!important } }

Yes it does ! https://support.squarespace.com/hc/en-us/articles/206542397-Adding-videos-to-your-site

The space between images could be resolved for example with this CSS code: @media (max-width: 767px) .gallery-grid-item img { object-fit: cover!important } } The caption on mobile is present at least on my side, so I am not sure if I understand how you mean that.

Yes, the problem is that you added the script in the Advanced tab but you should add the script in the Injections panel > Footer Advanced tab adds script in top of document instead of bottom of the document. So the script executes before the element were loaded in the html, so it throws an error.

Yes I can see you have an error ! (Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')) Let me check why.

section[data-section-id="63415f8d118f226aed28c197"] { .row { display: flex; flex-wrap: wrap; } .col { display: flex } } section[data-section-id="63246fe928c9b3341a4f8163"], section[data-section-id="62e92c8729e31102416039a2"] { @media (min-width:768px) { .row .row { display: flex; flex-wrap: wrap; } .col .col { display: flex; .sqs-block { flex: 1; } } } } section[data-section-id="62e92c8729e31102416039a2"] { @media (min-width:768px) { .col .col { .sqs-block-content { height: 100%; p { height: 100%; } } } } } Each of your section has different structure, for example this latest one has the box styling not on the outer container but directly on the paragraph, so it needs a different solution, like the one above. Anyway it works, I tried it, you can copy paste it.