Pip1

It seems to have resolved itself, I'm no longer getting the dangerous label on it. Thanks for responding @creedon

Hi @creedon and@paul2009,

I'm getting the same notification on the inbuilt Squarespace domain (SS backend address)on one of my websites, the live website domain is unaffected and doesn't have a dangerous label and when I test that in Google Search Console and safe browsing it's fine.

Is there a way to fix this dangerous error on the inbuilt domain? Would changing that domain resolve the problem?

Thanks in advance for any help

Pip

On 7/3/2024 at 11:14 AM, tuanphan said:

Use this code under

<style>
  @media screen and (max-width:991px) {
  .language-flag img {
    margin: unset !important;
    margin-right: 20px !important;
}
.language-flag {
    display: flex !important;
}
  }
</style>

 

Oh Brilliant, this has worked, thanks so much @tuanphan

Hi @tuanphan

Thank you very much for your time in helping me. I removed the old code and added this code to the footer, it's not overlapping like before but it is a little close to the hamburger menu, you end up clicking that instead of the flag. Is there a way to space them less close to the hamburger icon? It looks great on Squarespace mobile view, when I test it on a mobile device I see it is too close... see the picture attached.

For some reason the U.S flag stops being clickable on mobile, what would be causing that or blocking that? It works on a desktop

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
$('<div class="language-flag"><a title="United States Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/666064f9d54cda6204dc07e3/1717593337478/us.flag-circle.svg" class="us"  /></a><a title="Korea Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/6660681781dc74086dbf603d/1717594136144/sk-flag-04.svg" class="sk"  /></div>').appendTo('.header-title-nav-wrapper'); 
	});
</script>
<style>
img.us {
    width: 30px;
    margin-left: -30px;
}
  img.sk {
    width: 30px;
    margin-left: 10px;
    
}
.header-display-mobile .header-title {
    flex: 1 0 calc(100% - 100px) !important;
}
</style>

For some reason my U.S flag becomes unclickable on mobile too, not sure why that's happening, maybe my positioning is too close to the hamburger icon?

Hi @tuanphan

sure

https://manatee-flugelhorn-pmg9.squarespace.com/

pw: pip1

Hi @MayaViolet, I tried that now but it doesn't seem to have changed anything, I think I might have the mobile break positioning off, it goes weird on tablet size and some mobile devices and the US. flag still isn't clickable on mobile, not sure why that's happening

Hi @MayaViolet

sure

https://manatee-flugelhorn-pmg9.squarespace.com/

pw: pip1

Hi, 

I'm trying to add two flag svg files to my header, both going to two websites. I adapted code that was found on this forum to do it, the flag icons look fine on desktop but when it shows on tablet and mobile it does not stay in the position beside the hamburger icon and one of the flags is no longer clickable on mobile view. Would anybody Know how to fix this, I'm sure I have the code wrong and need some help on the mobile query

This is the code I've used

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
$('<a title="United States Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/666064f9d54cda6204dc07e3/1717593337478/us.flag-circle.svg" class="us"  /></a>').appendTo('.header-title-nav-wrapper'); 
	});
</script>

<style>
  img.us {
    width: 30px;
    margin-left: -30px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  @media screen and (max-width:768px) {
  img.us {
    position: absolute;
    right: 28vw;
    top: 15px;
}
  }
</style>

<script>
  $(document).ready(function() { 
$('<a title="Korea Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/6660681781dc74086dbf603d/1717594136144/sk-flag-04.svg" class="sk"  />').appendTo('.header-title-nav-wrapper'); 
	});
</script>

<style>
  img.sk {
    width: 30px;
    margin-left: 10px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
  @media screen and (max-width:768px) {
  img.sk {
    position: absolute;
    right: 20vw;
    top: 15px;
}
  }
</style>

You can see the images I've attached showing it on desktop, then tablet and mobile, I'd like them side by side on mobile and clickable. Could anybody help me with this?

1 minute ago, Pip1 said:

hi @tuanphan,

I've changed my flag code slightly but I'm having issues displaying them at the breakpoint on Tablet and mobile, You can see it is ok on desktop but as I size down the screen it goes all over the place. Would you know of a fix for this?

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
$('<a title="United States Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/666064f9d54cda6204dc07e3/1717593337478/us.flag-circle.svg" class="us"  /></a>').appendTo('.header-title-nav-wrapper'); 
	});
</script>

<style>
  img.us {
    width: 30px;
    margin-left: -30px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  @media screen and (max-width:768px) {
  img.us {
    position: absolute;
    right: 28vw;
    top: 15px;
}
  }
</style>

<script>
  $(document).ready(function() { 
$('<a title="Korea Website" href="https://creativepip.com/" target="_blank"><img src="https://static1.squarespace.com/static/65e86ab19a980a03f068ea6f/t/6660681781dc74086dbf603d/1717594136144/sk-flag-04.svg" class="sk"  />').appendTo('.header-title-nav-wrapper'); 
	});
</script>

<style>
  img.sk {
    width: 30px;
    margin-left: 10px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
  @media screen and (max-width:768px) {
  img.sk {
    position: absolute;
    right: 20vw;
    top: 15px;
}
  }
</style>

hi @tuanphan,

I've changed my flag code slightly but I'm having issues displaying them at the breakpoint on Tablet and mobile, You can see it is ok on desktop but as I size down the screen it goes all over the place. Would you know of a fix for this?

Thanks @paul2009

Hi @Paul2009,

I wanted to be able to create subscription options for a members-only area, it's based in Ireland and I want to offer one subscription in €Euro and one in £Great British Pound for Northern Ireland. Is it possible to offer a yearly subscription for the two different currencies if using Stripe as the payment processor? or can it only be one? I'm trying to think of a work around.

Many Thanks

It's back working this morning, it looks to have been fixed by Squarespace engineers, thanks for replying Tuanphan

It was back working properly this morning, all is well, thanks for responding Creedon and Paul

Is anybody having issues attaching links in list items in 7.1 today? I added a section from people, a carousel list and when I try to attach my link, by pressing the button "Attach Link"  the option disappears just to show me the button text. Am I missing something, I tested it in Chrome and Safari and it's happening in both...I've refreshed, logged in and out and it still won't work. 

I've attached pictures, the third is when I press "Attach Link", the option just disappears, anybody having this issue? Maybe its a simple fix

Is anybody having issues attaching links in list items in 7.1 today? I added a section from people, a carousel list and when I try to attach my link, by pressing the button "Attach Link"  the option disappears just to show me the button text. Am I missing something, I tested it in Chrome and Safari and it's happening in both...I've refreshed, logged in and out and it still won't work. 

Hello,

I'm trying to do something similar in the navigation of a site I'm working on. I want to have U.S flag, European flag and UK flag that each link to a different website. How do I add the URL links to this script? I've adapted this script found on the forum that was posted above.

Quote

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg" class="cnd"/>').appendTo('.header-title-nav-wrapper');
	});
</script>
<style>
  img.cnd {
    width: 50px;
    margin-left: 20px;
}
  @media screen and (max-width:991px) {
  img.cnd {
    position: absolute;
    right: 2vw;
    top: 5px;
}
  }
</style>

This might be the wrong way to change it, you can see my version here, can somebody show me where to add my external link on the svg

Quote

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
$('<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg" class="us"/>').appendTo('.header-title-nav-wrapper'); 
    });
</script>

<style>
  img.us {
    width: 50px;
    margin-left: 10px;
}
  @media screen and (max-width:991px) {
  img.us {
    position: absolute;
    right: 12vw;
    top: 15px;
}
  }
</style>

<script>
  $(document).ready(function() { 
$('<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg" class="eu"/>').appendTo('.header-title-nav-wrapper'); 
    });
</script>

<style>
  img.eu {
    width: 50px;
    margin-left: 10px;
}
  @media screen and (max-width:991px) {
  img.eu {
    position: absolute;
    right: 26vw;
    top: 15px;
}
  }
</style>

<script>
  $(document).ready(function() { 
$('<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg" class="uk"/>').appendTo('.header-title-nav-wrapper'); 
    });
</script>

<style>
  img.uk {
    width: 50px;
    margin-left: 10px;
}
  @media screen and (max-width:991px) {
  img.uk {
    position: absolute;
    right: 40vw;
    top: 15px;
}
  }
</style>

Actually I think I solved it 

.user-items-list-carousel__media-container{
  border:3px solid #000;
}

I'm having a similar issue with a border not showing up in a carousel list, it is only appearing on top and left side, would anybody have a solution for this?

This is what I used

.user-items-list-carousel__media {
  border:3px solid #000; }

5 minutes ago, paul2009 said:

"Hiding" prices does exactly that. The prices are still there, they are just hidden from the humans looking at the page. The price data will still be there in the metadata, the JSON and the HTML.

Thanks for the reply Paul,

So is there a way for me to stop it showing on google or do I need the remove every individual price?

Hi,

Wondering can somebody help me.

I created a store in 7.1 and I have successfully hidden the quantity, price and add to cart on the site as I don't want people to purchase of it yet, it's working like a catalogue with products marked POA. The prices are set on the product but they are hidden using css, the problem I'm having is when you google some of the products individually, it's showing the hidden price, is there any way of stopping this globally with javascript or do I need to remove every price, it will still show €0.00 on google, I'd rather it said POA or just blank.

Any help would be greatly appreciated

Pip