Vicks

11 hours ago, lina1570047784 said:

Any thoughts about this? @Vicks

I cannot access the website. it says wrong password

by the way, you can target individual links by their target ( href attribute ). if you are familiar with CSS, its written like this:

[href='/path/to/your/link'] {
    your custom styles here
}

go to setting > site availability, choose password protected. give any password, and then you can post the link with password here.

1 hour ago, BarbO said:

I feel smart today 🙂 I just figured out how to host my Articulate Rise course on Amazon AWS (Free Tier) and use that link for my downloaded Rise course on my SquareSpace website.

The setup process on Amazon was not fun or intuitive, but I worked through it. Start here: 

https://aws.amazon.com/getting-started/hands-on/host-static-website/

It also requires a Github repository so it's not for the faint of heart.

Check out: https://www.barbopyt.com/about

Click the resume link near the bottom of the page.

Good luck to you!

thats what came into my mind because articulate generates a static site. which you can host on netlify/github pages or S3, and then embed as iframe into your SS site.

can you please share the website url. So I can check what is the font family in the other fields. It should normally be applied if you have changed it in the editor, but lets check in the code.

Hi, I assume this code should add thick borders to every input boxes in the form. Because I no longer see the .field-element class in your form fields. For this, you can try changing the css to the following:

.form-wrapper .field-list .field textarea,  
.form-wrapper .field-list .field input {
  background-color: #fff !important;
  border: 2px solid #000 !important;
}

!important is needed because I see that squarespace is applying a class directly to the input (for example: class="eTv7qUMqLR9lJxpIAC3F" ) and adding css. so you need to override it.

Hi, can you try instead of injecting the code in the footer. Use the Code block to inject it on the homepage only. Its the same place where you add a block on text, or image. There is an option "code" to inject code into only one page.

is it some custom css you are using? Can you share that?

Found the issue: You have this position: fixed !important on header. which is also setting top:0; Thats whats causing your menu to disappear on mobile.

If I remove the top:0, it solves the issue. is it done with custom css or is it squarespace default ?

I see this:

The topnav element is display:none. I am not sure what is causing it. because my script is only adding and removing a class called 'hide' in the #headerwrapper element. which is just moving it 100px up or down. it cannot hide the menu.

Can you remove my script from the page, so that I can see the normal behavior?

Also please send me the script which you have added to your website. Is it just this or is there some more lines ?

I do not see any navigation menu on your website neither on desktop nor on mobile. Looks like there is no item inside the topnav element. ( see your website code attached in image)

Are you using some other scripts also on your site which might be malfunctioning and removing it?

The script I provided only moves the header up and down 100px based on scroll position, it does not remove anything from HTML. So there must be something else causing it.

can you explain how do I see the nav menu? If its caused by my script,  can you remove my script only and check if the menu appears again? because I do not see the menus at all.

10 minutes ago, kaydotjpg said:

@Vicks I have the code in the footer code injection area.

I replaced the second line of the code with the new line you gave me, but the effect just disappeared all together. I could be deleting too much of the original l code? Or something? Would you mind rewriting the code with the new line added? Just to make sure I get it right 

updated the original answer

here is code for the button 

.list-item a.sqs-button-element--primary {
  letter-spacing: 0em !important;
}

.list-item a.sqs-button-element--primary:hover {
  /* notice the 0.5 in the last argument in the hsla, thats alpha, 0.5 means 50% transparent. */
  background-color: hsla(289.41,92.73%,10.78%,0.5) !important;
}

This will update the hover color also.

you can add code block and paste your embed code in it.

https://support.squarespace.com/hc/en-us/articles/206543167-Code-blocks?platform=v6&websiteId=64431e6b45301c5a00f08373

there is also an embed type block. perhaps that might suit your need.

where are you injecting this code? are you adding it to advanced > code injection panel ?

if you add a code block using add button in the homepage. I think it will only work on homepage.

OR

try changing the second line by this:

const landingSection = document.getElementById('block-yui_3_17_2_1_1682011830342_7436');

were you able to fix this issue? whats the state of the website at the moment? If I want to give it anther try 😄 

<style>
  a[href="/the-rk-green-promise"] {
    color: green;
  }
</style>

This should do it. you can add this custom css. and if you want different color, you can replace the green with your color code. 

You can do this by using some JavaScript. The code below uses intersectionObserver to look if the first section is visible in the browser, and until its intersection the browser window, it keeps the class 'hidden' added to your logo. As soon as the section completely disappears from the browser visible area, it removes the 'hidden' css class from logo.

In the .hidden class I have added visibility:hidden. or if you prefer, you can use display:none. Try both.. let me know if it works.

<script>
const logo = document.getElementById('site-title'); 
const landingSection = document.getElementById('block-yui_3_17_2_1_1682011830342_7436'); 

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.target === landingSection) {
      if (!entry.isIntersecting && entry.intersectionRatio === 0) {
        logo.classList.remove('hidden'); 
      } else {
        logo.classList.add('hidden'); 
      }
    }
  });
});

observer.observe(firstSection); 
</script>

<style>
  .hidden {
    visibility: hidden;
  }
</style>

This shows the logo only once the first section is completely out of browser window. if you want it to display early, you need to tweak the intersectionRatio.

You can add a block just before gallery, and add a heading in that block lets say "my work" and anchor the link to that block. that will scroll to the heading thus showing the gallery.

If your font does not have dedicated bold style then on desktop the browser tries to render it automatically whereas on mobile devices it causes problem. You can try including: 

-webkit-font-smoothing: antialiased;

if that does not help, then please provide some more details about how are you including your custom font in the site. does your @font-face declaration has bold style or not.

To give an example, here is the declaration of font with the same name and different weights:
https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/#style-linking

The link is pointing to the section where they have used two different files for different weights of the font. So when we use weight 700, it uses  Ubuntu-B-webfont.eot font to render bold style and when you use weight 400, it uses Ubuntu-RI-webfont.eot for normal style. This way, the browser doesn't have to emulate the bold font from normal style.

perhaps this might help:

https://gist.github.com/vikramsoni2/2c9a255860e572db193eb6935834134f

You can apply some custom css to not break the word on smaller screen. Here is some hint. If you provide website link and some detail where its happening, someone here can assist you better.

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

after this you will need to solve the positioning of link in Want Free Yoga card. 🙂

I see you tried to move it using flex order attribute, but the issue here is that the price is not the part of the summary-content flex. its part of its child flexbx summary-excerpt. So it can move anywhere inside summary-excerpt using flex positioning and ordering, but it cannot be moved next to title because thats not inside summary-excerpt. I can suggest a simple css which will make it without worrying about flexbox.

1. make the summary-content position:relative, that means inside this DOM container anything we place using position: absolute will be placed relative to the position of summary-content. just add this line, in your css, you can include it in any previous css that you have already written.

@media screen and (max-width: 640px)
#collection-64165b0cfb51c6694bd1e502 .summary-content {
    position: relative;   // just this line
}

2. now we make the price container absolute positioned.

@media screen and (max-width: 640px)
#collection-64165b0cfb51c6694bd1e502 .summary-excerpt p:last-of-type {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
}

giving position:absolute will place it right next to the top left corner of the summary-content box. we add right:0 and top:0 to move it to the top-right corner of the box, and then we just add some padding so it aligns with the title.

<script>
  let content = document.querySelector('.eventitem-sourceurl').innerHTML
  content = content.replace("Source: ", "Buy Tickets: ")
  document.querySelector('.eventitem-sourceurl').innerHTML = content
</script>

hope this helps