tuanphan

You can use this code to Website Tools > Custom CSS box

.header-nav-folder-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-nav-folder-content div {
    margin-right: 10px;
}

On 6/29/2024 at 4:18 PM, WilsonTSmith said:

I did as you instructed (remove any code from the page header code injection and instead paste your new code into the website tools/Custom CSS, but it seems the content text is still inserted before each blog post, rather than only before the most recent post, or at the top of the blog page.
If you scroll down on this page you can see that it's still at the top of each blog post

https://wilsontannersmith.com/hcs-iii

 

Sorry for the delay following up on this! Thanks so much for your help.

Use this new code

.collection-type-blog.blog-layout-center .article-list:before {
    content: "After his sudden passing in May 2013, I’ve been occasionally collecting stories and (re)discovering the dance/theatre work of my father, Henry Clay Smith, and his company Solaris Dance-Theatre. Intermingled are my own stories and reflections on/through grief.";
    display: block;
    font-size: 16px;
}

I think you should wrap both flags on an HTML then you can target it easier. You can follow these two steps.

(Remember to save a copy of all code somewhere, just for backup, before doing anything)

(1) Remove this code

On 6/29/2024 at 3:24 PM, tuanphan said:

 

On 6/28/2024 at 5:34 PM, Pip1 said:

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

 

(2) then use this new code to Code Injection > Footer

<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;
}
.header-display-mobile .header-title {
    flex: 1 0 calc(100% - 100px) !important;
}
</style>

Can you share site url?

I see you disabled Cart, if you still need help, you can enable Cart icon then we can help easier.

On 6/29/2024 at 10:26 AM, PerfectCaptureBooth said:

This seems promising, but unfortunately , I have slideshow gallery reels attached to each menu option, So I cannot add the code blocks to those gallery sections 😕

You can add code to Reel caption instead of Code Block, but make sure you enable "Gallery Caption" to make browser can read caption code

What is your site url?

On 6/28/2024 at 7:22 PM, Paul_Wille said:

Hey, maybe you guys can help me too!

Our site: www.bottegajacobs.com

1. we want that the individual products in the carousel can also be opened by tapping, currently they are quasi dead and you can not interact.

2. for the size of the slideshow it would be great if it is cropped on the right as in the photo I am attaching. There should be 2 products fully visible and a third in the cut so that you can check that it is a slideshow.

Thanks in advance,

Paul

#1. You can use this code to Custom CSS box

@media screen and (max-width:767px) {
section[data-section-id="667d7a7030813771141393c7"] .mobile-arrows {
    display: flex !important;
}
}

I see it already show fine on my end, you try checking it again.

On 6/28/2024 at 9:22 PM, eZeeBags said:

Followed above instructions and created a duplicate of the desktop optimised page and optimised the new page for mobile. Injected the below code into the desktop optimised page.

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://amphibian-pomegranate-kebs.squarespace.com/mob-test-2";
}
</script>

The slug mob-test-2 is the mobile optimised page.

The full page does not load. Just the page title and header logo appears in the mobile view. See attached screenshot But no 404 error either. Let me know where I am going wrong. 

 

What is desktop page? I can test easier

On 6/28/2024 at 11:52 PM, samnorris04 said:

Hello,

Is there a way to do this without it being code injection? Can this be done on CSS?

If you use my code, you can edit Site Footer > Add a Block > Choose Code > Then paste same code to Code Block

Try adding code to Code Block

Instead of using @import, you try using this code to Website Tools > Code Injection > Header

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+NZ:wght@100..400&display=swap" rel="stylesheet">

and use this to Custom CSS

#block-402c3fa4d8c1392ade79 h2 {
 font-family: "Playwrite NZ", cursive !important;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

They used Code Block do to do this.

You can find a free code on Codepen (with keywords: tabs or tab), then share link, we can convert code it to Code Block.

Also, if you need a simple tab with some texts only, click on each text >> show corresponding detail under, you can follow this guide.

You mean all menu items not align with burger icon or?

@foreverurmuse Can you share link to example site? We can check easier

Hi,

What is your site url? We can help easier.

With example site: https://mainframe.co.uk/portfolio

I see they used Image Block with Image caption and some CSS to achieve this. With click link open video lightbox, I think they used a lightbox plugin.

On 6/29/2024 at 9:58 AM, charlesjw said:

FYI the site is: https://www.daniellegambleskin.com

You will need to use tag to do this.

First, create a tag with name: no cart

Next, assign it for all products belong category: Biologique-Recherche

Next, use this code to Website Tools > CUSTOM CSS

/* hide */
.tag-no-cart {
.product-quantity-input, .sqs-add-to-cart-button-wrapper, .product-price {
	display: none !important;
}}

On 6/28/2024 at 5:43 PM, maboli said:

Hi, that's worked but I now have a magenta block below, how do I change this to the yellow?

You can use this CSS code

body.homepage {
    background-color: #e0fd2c;
}

On 6/28/2024 at 9:56 PM, Paul_Wille said:

Hey, we have the same Problem,

we'd like to have pretty much identical arrows in the same position as the person who opened the post. (www.bottegajacobs.com), but only for a mobile section. Can you help us?

Best regards, Paul 

 

You can use this to Custom CSS box

@media screen and (max-width:767px) {
section[data-section-id="667e8aef609f49410725a2bb"] .desktop-arrows.arrows-bottom-outer {
    display: flex !important;
    bottom: unset !important;
    top: 50% !important;
    justify-content: space-between !important;
}}

Can you share page url? We can check problem easier.

You can change 767 to 4000

On 6/29/2024 at 7:07 AM, Zenta said:

On blog details posts. So far I have only two posts and want to remove animation from them 

Try this code to Website Tools > Custom CSS

/* blog posts animation */
.blog-alternating-side-by-side-wrapper * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

Maybe SS didn't export Images properly, you try edit a blog post >> check this to see if it appears or not.

I guess we can use some code to target this. Can you share link to page where you use gallery section?