tuanphan

On 4/25/2024 at 3:31 AM, ncast21 said:

Hi, I'm having this same issue. My Miscellaneous font looks fine in desktop view but in mobile view it looks larger. Making the overall font size smaller in the styles panel to correct the mobile view leaves it too small to read in desktop view. I'm looking to target the font size for my miscellaneous font only in mobile view, I haven't found much luck finding the specific CSS to target this. Hoping you can help, here are images of the Desktop and mobile view (the Misc font is the tags below the button "South Texas | Lake Casa Blanca International State Park...").

 

Can you share link to this page? We can check easier

On 4/25/2024 at 3:23 AM, nshemanski said:

Sorry for the confusion there. Password is: ZIP92663

Let me know if there are any issues accessing the site.

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

[data-section-id="65bd69b57d004158cc22c2db"] .content-wrapper {
    padding-bottom: 0px !important;
}

First, create a tag with name

natc

Next, assign this tag for all products where you want to remove Add to Cart, Quantity

Next, use this code to Website > Website Tools > Custom CSS

/* Hide add to cart quantity */
.tag-natc div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
/* hide quantity */
.tag-natc div.product-quantity-input {
    display: none !important;
}

Can you share link to Hubspot blog?

Can you share link to page where you use slideshow?

You will need to adjust some code in CSS box for example this code

font-size: calc(var(--font-size) * 1.5);

need to add symbols, like this

font-size: calc(~"var(--font-size) * 1.5");

or

width: calc(var(--font-size) * 0.5);

to

width: calc(~"var(--font-size) * 0.5");

(do similar for all code with calc text)

11 hours ago, Sevans said:

Here it is!

 

https://wombat-sturgeon-zgtp.squarespace.com/

 

I did a work around, I just made it white, but would be great if it wasn't there at all!

 

Thank you 

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

@media screen and (max-width:991px) {
.header-actions.header-actions--right, .header-actions-action--cta {
    display: flex !important;
}
.header-burger {
    display: none !important;
}

.header-display-mobile {
    flex-direction: row-reverse;
}
.header-title-logo a, .header-title-logo a img {
    max-height: 40px !important;
}
}

You can use Anchor Links

https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

Try this CSS under

@media screen and (max-width:767px) {
img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
img.grid-item-image.grid-item-additional-image {
    opacity: 0 !important;
}
img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}
}

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

[data-section-id="6627df5639ad8823ae2603f7"] .content-wrapper, [data-section-id="6627df5639ad8823ae2603f7"] + section .content-wrapper {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

10 hours ago, JWSKS said:

I am struggling with the same issue. www.therutlader.com - the second image (Bike Reg) in mobile view is stretching the page, I am trying to get it to roughly half the size.

You can use a CSS code like this to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1654723628836_4556 {
    max-width: 100px;
    margin: 0 auto;
}
}

I see 4 products. Which product you want to change link? Or change all 4 products?

8 hours ago, askdkym said:

I want to edit all of it!  But I gather by your followup question, this is all custom code and not built into the customization panel.

You want to change text color or?

Yes. They removed trial since April 2024..

I don't know any other tools. You try posing this question to Coding category https://forum.squarespace.com/forum/39-customize-with-code/

Do you have/know an example? We can check easier

It should be 2 //

You mean video disappear on mobile

or you need to use different videos on desktop - mobile?

On 4/24/2024 at 10:38 PM, LightGraphix said:

This looks great, this is exactly something i am trying to do on my website, do you have a video tutorial of how you did it please? 

First, you add a Section with Video Background

Next, use this code to Custom CSS. Replace article>section:first-child with section id

use this free tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

  article>section:first-child {
    height: 100vh !important;
    position: sticky;
    top: 0;
    padding: 0 !important;
}
article>section:first-child video {
    position: fixed !important;
    top: 0 !important;
}
article>section:nth-child(n+2) {
    z-index: 99999 !important;
}

On 4/24/2024 at 10:23 PM, JonnyIlsley said:

I have actually understood what needs to happen now, I have used nth-childs to target the correct sections.

 

My final question is can you set an offset in the ".offset{}" field? It feels like you should be able to but I am not seeing any effect. 

 

Thanks

You can use scroll-margin-top

https://www.w3schools.com/cssref/css_pr_scroll-margin-top.php

You can see this

#1. To remove arrow, use this code to Website > Website Tools > Custom CSS

.passthrough-link:after {
    display: none;
}

#2. I can't find a way to pull this automatically.

But you can consider using this ideal

• Add a text/hyperlink on all posts where you want to do this
• I will use code to move this text under title

If you like this, I will write a guide for your case.

On 4/24/2024 at 5:38 PM, mportch said:

Thanks!

I'd like the cross to be always visible at the top of the screen as you scroll down the page (just as the logo and navigation are) - this way it can be clicked on at any time to read the info.

 

https://smilodon-ocelot-my5f.squarespace.com/lost-america

With this lost-america page, you can add this code to Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
   $('div#block-yui_3_17_2_1_1713954438114_16243 pre').click(function(){
    $("div#block-yui_3_17_2_1_1713954438114_16243 p").toggleClass("show");
    }
  );
});
</script>
<style>
  #block-yui_3_17_2_1_1713954438114_16243 pre {
  	cursor: pointer;
  }
  #block-yui_3_17_2_1_1713954438114_16243 p {
  display: none;
  transition: all 0.1s ease;
  }
  .show {
  display: block !important;
     transition: all 0.1s ease;
  }
</style>

On 4/24/2024 at 9:33 PM, jallory said:

Hi @tuanphan thank you very much for your response and this offer. However, it isn't making a change. 

It works, but you need double click...

You can remove all code, I will test it again

I see now. It looks fine to me?

On 4/24/2024 at 5:32 PM, WilsonTSmith said:

Yes, that screenshot location is correct - the idea is that the header text would be independent of the blog posts. Previously I was using a template which allowed this, but it seems the template I'm currently using does not.

So did you code work or you still need help?