Beyondspace

March 29

You can use the following code to set burger menu smaller and locate it to the right

.header-display-desktop {
  flex-direction: row-reverse;
}

.burger-box {
  width: 30px; /*change the value for width of burger*/
}

Let me know how it works on your site

March 29

7 hours ago, hannahnowlan said:

Red border?
I'm also wondering why the scale of the image seems zoomed in/larger in the footer than the original image (below).

Add to your custom css one more attribute to make image cover entirely

section[data-section-id="66015b5d26f89479f48e33b2"] .section-background-overlay {
  background-size: contain;
}

Let me know how it works on your site

March 29

You can try adding to Custom Css

#collection-64a95dac4d2a13562e08aece .gallery-caption p.gallery-caption-content {
  text-align: center;
}

My testing

Let me know how it works on your site

March 29

I think that Home, About, and Contact are the normal pages with no navigation

March 29

3 hours ago, byboldstudio said:

Hello,

I am using 2 different custom fonts for my website. One for headings and one for paragraphs, they are all working fine except for the paragraph 3, it was looking just fine before the site was public but now that is public it just changes itself to a default serif font. This is the code I am using right now, which is exactly the same for p2, p1 and I even have the .sqsrte-small coding so I think with that it should be working fine. Is there something I am missing? pls heelp!

the site is byboldstudio.com

Which text are you setting? Can you share some screenshot?

March 29

2 hours ago, Neet said:

I would like the image captions on home page ( captivating portraits, lifestyle stories, and creative studio)to be bigger and center in the middle with the same text style as rest of website!

Can you share your site so I can take a look?

March 29

26 minutes ago, Marvise said:

Hello,

I am having some difficulties with my CSS code. I added the "hamburger menu", but it's taking up the entire screen. I want it to be narrow like this screenshot. Also, how can I move the hamburger to the right side instead of it's current location on the right?

Also, i am looking to add some sort of "Scroll" button such as this.

One final request is that when the page loads, it sort of "fades in" with a logo similar to the a day to the remember website when you load it. Their website is https://adtr.com if you want a live representation.

Can you share your site so I can take a look?

March 29

I can not see any products. Have you added them yet?

March 29

2 hours ago, PeakRyan said:

Sorry about that. I put it in the post submission, but clearly that didn't work. It's aaasteelfabricators.com.

Can you share me the direct link URL to the page having the zoom effect? I can not see it on home page

March 29

2 minutes ago, alsmith877 said:

I'm already in your debt, but I'd like to ask another one. The solution works in the legacy section, but also, the old sections are the worst, so I'm trying your other method too.

Is this code CSS? Or embedded code block? I have very little actual coding knowledge, so all I can do is copy/paste what you give me and stick where you tell me to and cross my fingers. Currently I can't get it to work. Thanks again!

Sorry, you can add my code on custom CSS

March 29

The lightbox does not include the information of image.

@tuanphan codes help to get information from the gallery and show on lightbox. Therefore, the business plan is required to implement this feature

March 29

I try and it works normally. Have you fixed it yet?

Patrickvhnederend · March 28

9 minutes ago, Patrickvhnederend said:

Thanks. I added your code.

I slides in, but then loads the BOOK-NOW page, therefore the widget disappears again.

Is it possible to not link it to a page, so I can omit the extra booking page?

I've just updated my code, try again and let me know how it works

March 28

33 minutes ago, Patrickvhnederend said:

I didn't put it on the home page, as I can't put them as part of the BOEK NU button in the header.

Do you want me to make a temp button with this? As long as it is not in the header, it works.

Let me know

Try adding to your footer code injection

<script src="https://cdn.jsdelivr.net/npm/appybee-widget"></script>
<script>
  AppyBeeWidget.init({
    companyAPIKey: 'f3a4a372f989b69e66e4bfb0a438b0b3',
    style: 'side',
    locale: 'nl'
  });
</script>

<script>
  const btns = document.querySelectorAll('header a[href="/book-now"]');
  if(btns.length) {
    btns.forEach(button => {
      button.onclick = function(e) {
        AppyBeeWidget.show();
        return false; /*preventDefault*/
      };
    })
  }
</script>

<button id="widget-button">Boek nu</button> on your above code can be removed

k8pq · March 28

19 hours ago, k8pq said:

WEBSITE PAGE: https://kinsmen.org/gatherings

I have added buttons to the first Event Summary block on this page, but I'd like to exclude the buttons from the second Event Summary block on the page. The block ID is #block-yui_3_17_2_1_1710347334583_18027. I've tried adding .sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) to the following code without success. Can someone help, pretty please?

/* Buttons on Event Summary Blocks */
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
padding-bottom: 50px !important;
}
.summary-content {
position:relative;
}
.summary-title .summary-title-link::after {
content: 'REGISTER HERE';
background-color: black;
border-radius: 0px;
display: block;
padding: 13px 26px;
font-size: .75rem;
font-weight: 500;
font-style: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
background-color: black;
border-color: white;
border: 1px solid #ffffff!important;
position: absolute;
bottom: -60px;
}

.summary-title .summary-title-link:hover::after {
opacity: .8;
}

if it has only 2 summary blocks, i think we should select directly the one you want to apply style.

If you intend to have more than 2 ones and set style for 2 summary blocks and exclude the mentioned section, you can try the following Css code


.summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-block-setting-design-list .summary-item, .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) .summary-item.positioned {
  padding-bottom: 50px !important;
}
.summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-content {
  position:relative;
}
.summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-title .summary-title-link::after {
  content: 'REGISTER HERE';
  background-color: black;
  border-radius: 0px;
  display: block;
  padding: 13px 26px;
  font-size: .75rem;
  font-weight: 500;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  background-color: black;
  border-color: white;
  border: 1px solid #ffffff!important;
  position: absolute;
  bottom: -60px;
}

.summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027)  .summary-title .summary-title-link:hover::after {
  opacity: .8;
}

Let me know how it works on your site

SarahFrancesBrandCo · March 28

9 hours ago, VM72 said:
Hi, a while ago I used some customised code on my website to hide the price and purchase button in my shop. The code I was given was perfect for what I needed. BUT I've now updated my website to 7.1 and the code below no longer works. Is it still possible to do?
.ProductItem-details .product-price, .tweak-product-item-details-show-quantity .ProductItem-details .product-quantity-input, .tweak-product-item-details-show-add-to-cart-button .ProductItem-details .sqs-add-to-cart-button-wrapper, .ProductList .product-price {
  display:none !important;
}

Please share your site url so I can take a look

March 28

2 minutes ago, cherylr said:

Thanks -

There's a solution when the video is added in an iframe, but that's problematic with mobile. Still hoping someone has a current solution!

Can you share your site url so I can take a look?

March 28

5 hours ago, JJ04 said:

Hi, I need help with redirecting my cart button on my productpages directly to my affiliate companys storepage. But I have no Idea how?

Can you share your site url so I can take a look?

March 28

3 hours ago, bartseijbel said:

Hey!

I'd love to display my portfolio as a masonry. I've read a few forum post about installing Macy.JS for that, and so I tried. But I really don't understand how I can install this on my website. Any help would be appreciated! I'd like to have a masonry style grid like the portfolio on https://www.verasfawaz.com/

Website: www.bartseijbel.nl

Thanks!

Javascript is required to implement this kind of layout. which plan of Squarespace are you in?

March 28

3 hours ago, ABCDEFGHUMAN said:

Hi, can anyone offer assistance to help remove the grey padding in the carousel on mobile?
Attached a screenshot/web dev link in URL.

It seems even when you take the media width to 100%, you are still left with space on either side of a 1:1 image.

Ideas? Thank you in advance.

Can you share your site url so I can take a look?

March 28

30 minutes ago, eemmall said:

I have a portfolio website, within the 'Work' page is all of my projects. Two of these projects have not yet gone live in the real world, so I would like to hide them for now until they're in the public domain.

I originally tried to do this with Code Injection, but now I have paid for a personal plan this is no longer available to me.

Working with chatgpt I have the following code, which *should* keep the projects there, but display them at 50% opacity, be unclickable and display the message 'Coming soon' when hovered over:

/* CSS to visually dim and disable draft projects */
body:not(.sqs-edit-mode-active) .portfolio-item[data-title^="Draft:"] {
opacity: 0.5;
pointer-events: none;
}

/* CSS to display "Coming Soon" message on hover */
body:not(.sqs-edit-mode-active) .portfolio-item[data-title^="Draft:"]:hover:after {
content: "Coming Soon";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
font-size: 16px;
color: #333;
}

Unfortunately the code doesn't work, I can't seem to figure out why. I would love some help here as its important for me for the overall site to go live ASAP.

TIA 🙂

Can you share your site so I can take a look?

March 28

16 minutes ago, Patrickvhnederend said:

Hi, I'm trying to get a third-party widget to activate with the BOEK NU (book now) button in the header. Unfortunately, I have only been able to link this to a separate booking page with the IN-LINE widget, which is not what I want.

The widget should 'slide-in' from the right-hand side of the page. For this, I received the code below.

Could somebody help me with this?

Regards,
Patrick

Website: somatichub.nl
Pasword: SS2024!

<button id="widget-button">Boek nu</button>

<script src="https://cdn.jsdelivr.net/npm/appybee-widget"></script>

<script>
AppyBeeWidget.init({
companyAPIKey: 'f3a4a372f989b69e66e4bfb0a438b0b3',
style: 'side',
locale: 'nl'
});
</script>

<script>
var button = document.getElementById("widget-button");
button.onclick = function() {
AppyBeeWidget.show();
};
</script>

Where are you put these above codes? I check on your home page but can not find them

March 28

I suggest you using the classic section to prevent this action for markdown.

If you want to keep the current section (fluid engine), we should apply some additional code to fix each item.

@media (min-width: 768px) {
  .fe-65fddf29aa7be01c18e74fb8 {
    grid-template-rows: repeat(10, minmax(calc(var(--container-width)* var(--row-height-scaling-factor)), auto));
  }
}

Let me know how it goes on your site

March 28

You can try the following code

@media only screen and (min-wid:100px) {
  #itemPagination {
    position: fixed;
    background: red;
    bottom: 50px;
    width: 350px;
    padding: 0;
    background: transparent;
    display: flex;
    justify-content: space-around;
  }

  #page {
    z-index: 99999;
  }

  .pagination-title-wrapper {
    display: none;
  }

  .item-pagination-link{
    margin: 0;
  }
}

Let me know how it works

March 28

14 minutes ago, DMckean said:

Yes, exactly that, maybe arrows or the next / previous project name. I think the previous button is hidden behind the navigation on the project page. but I can't find a way to remove it from there, an placing it on the Navigation.

Removing text and keeping only arrows like this, right?

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by Beyondspace

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources