Beyondspace

5 hours ago, cdotzdesign said:

Hiya, So this has been ongoing with one problem resulting from fixing another - all on mobile version only. 

 

So first, with no added css there is some sticky scrolling and and the page wiggles all over the place with white edges visible.  I was able to stabilize that with the code : 

html, body {overflow-x: hidden;}

Then when I do that, a white bar appears and blocks the first part of my menu when you open it from the hamburger.  As well as my banner graphic reacts inconsistently and sometimes and scrolls half into the header with my logo that is only on mobile.   

Not sure what to do at this point, so I just removed that code and am letting it jiggle.

 

https://cdotzdesign.com/

Please help, thank you.

This code makes the element outside  of the mobile view

Try adding the following code to fix it

@media only screen and (max-width: 767px) {
  .tweak-footer-layout-stacked .Footer-nav {
    margin-right: 0;
  }
}

Let me know how it goes 

3 hours ago, BilO said:

Hi, 

I want to customize my homepage hero to be a slider gallery, however, I would like to customize the amount of content in the banners.
As you can see from my screenshot, the content includes:
1. Shape with transparency 
2. Image (teal starts) 
3. subhead "a Scratch exclusive"
4. H1 "INTRODUCING THE KNOCK KNOCK"
5. copy: "our twist on an iconic treat."
6. Image "Made from Scratch"
7. Button "Order Now"

 

 

Does anyone know if something like this is possible to replicate for a banner gallery slider section. Or is there a plugin that you may know of to customize the content in the slider banner. 

Appreciate and help in advance.

Here is a link to the website: https://bell-cheetah-n87s.squarespace.com/
Here is the password: scratch 

 

One approach you can try

2 hours ago, A34K said:

Hi everyone, 

I'm new to squarespace but I've talked to support and they assure me there isn't an official fix for my issue. I've designed images with desktop in mind as the layout for specific sections. They look great in the desktop layout but when I switch to mobile it crops at random and looks a mess. 

If I change it on mobile, it changes the desktop layout. Is there a way, through coding or otherwise, to be able to adjust the image background of a section, without also changing the desktop, and vice versa?

I apologise if this is already asked and answered, I'm just not even sure how to phrase the question let alone search for it on here.

 

Hoping someone can help?

 

Many thanks

Here is one approach we can try

11 hours ago, LukeDesign said:

Hi all, new to Squarespace. I am trying to set up my home page with a hero image in the header that takes up the full screen. When you scroll down it displays the navigation bar. Here is an example:

https://rudneynovaes.com

This would only be for the home page. 

Thank you!

What is your URL site? You can share it so we can help easier

11 hours ago, azotejr said:

Hello everyone! I'm new to Squarespace and have a basic understanding of HTML and CSS. I'm trying to customize the placement of the hover text on the thumbnails of my portfolio page, which is set to "Grid: Overlay".

The options that Squarespace offers are either centered or left-aligned. I want to make the text align to the bottom right corner of the thumbnails and, ideally, with a smaller padding than the default settings. (Please see my attached image for a more straightforward explanation.)

Is there any way to achieve this through custom CSS? I would really appreciate it if someone could give me some clues. Thank you in advance!

Can you share your URL so I can check it more easily?

10 hours ago, Sauceboss770 said:

https://flounder-cinnamon-c45l.squarespace.com/

Password website

Help with clients website i want a separate image on my mobile home section i found some video but it was putting the image on all my pages

One idea you can try is adding both section for desktop and section for mobile. Then you can use custom CSS with media query to set your sections visible on the right breakpoint

/*mobile breakpoint*/
@media only screen and (max-width: 767px) {
  /*set display none for desktop section*/
}

/*desktop breakpoint*/
@media only screen and (min-width: 768px) {
  /*set display none for mobile section*/
}

11 hours ago, untamedbri said:

Hi, my custom font code is not allowing the font choice to be clickable on firefox. It loads fine and works great on every other browser but for some reason my hyperlinks don't work on firefox. Any help would be appreciated. 

 

Site: https://www.nolanmatthews.com/

 

Code: 

//Custom Font //
@font-face {   
font-family: 'DIN Regular';   
src: url(https://static1.squarespace.com/static/65df790327901b71a48a2051/t/65dfae45865c4d1b2854a3a9/1709157957805/DIN+Regular.otf), 
url(https://static1.squarespace.com/static/65df790327901b71a48a2051/t/65dfae3353156d2d3cd4474b/1709157939610/DIN+Regular.woff), 
url(https://static1.squarespace.com/static/65df790327901b71a48a2051/t/65dfae393a03382a1622fc8d/1709157945994/DIN+Regular.woff2); 
}
.sqs-block-button-container a{
    font-family: DIN Regular !important; 
}

h1 {font-family: 'DIN Regular';}
h2 {font-family: 'DIN Regular';}
h3{font-family: 'DIN Regular';}
h4{font-family: 'DIN Regular';}
p {font-family: 'DIN Regular';}
p2 {font-family: 'DIN Regular';}
p3 {font-family: 'DIN Regular';}

.sqs-block-form .field-list .title,
.sqs-block-form .field-list .caption,
.form-wrapper .field-list .field .field-element,
.sqs-block-form .field-list select,
.form-wrapper .field-list textarea,
body:not(.button-style-default) .sqs-block-form .sqs-editable-button {
    font-family: "DIN Regular" !important;
}

h1 a, h2 a, h3 a, h4 a, p a {
text-decoration: none !important;
}

Can you take a screenshot of where you find this issue?

I have already check and found no difference between my firefox and edge browser

8 hours ago, ThomasDes said:

I've spent all day trying to upload a video to my website. It's a 1:1, 1080p, 30s video. When I upload it as a video block, it crops it as 16:9 and leaves two huge spaces to the sides. I tried fixing it with padding-bottom in custom CSS but it wouldn't work. I tried using a code block and embed, but none of those will work.

No matter what method I use or what code I add, I can't seem to get rid of this blank space that appears between the video and the end of the section. It's not margin or padding. I've tried position:absolute - position:relative: - grid-gutter:0, height:auto - height: (760px, 810px, 1080px) - etc. Nothing worked.

If you know the solution to this please let me know and any ideas are welcome. I can send you the custom CSS, or any piece of information you need.

You'll see the rest of this page is a mess because it's a duplicate we aren't using. Link is https://www.theslatestudio.com/home-draft
 

Thanks in advance!

 

Have you fixed it yet? I check it works properly on my device

9 hours ago, Rachel1988 said:

Hi.

 

Is there a way I can get somebody to create a code for me from my booking system (integrated) to my website like a widget. 

 

My booking system has custom codes and plug ins for other things like my schedule etc but not my pricing section. 

 

Link above what the coding on my courses page looks like. My pricing page is just text and buttons with links to my booking system 

 

Any help would be appreciated 

Which function do you want to implement on your Squarespace site? Can you describe more detail?

5 hours ago, tucecoop said:

I am having problems with adding a button to a website footer. It was working fine before but no longer works, so wondering if it is a bug.   

Every time I am in the edit footer mode and go to add a block, it just takes me back up to the top of the website page and won't insert a block. I have checked all help topics and forums and can't find a solution. 

 

 

Can you share your URL so I can check easier?

5 hours ago, Insomniac said:

Because reasons, today I added a splash or landing page to my website www.clevelandflag.com. 

I made a blank page, put some stuff on it and set it to my home page. Here is the new splash/landing page now set as as the site's homepage: https://www.clevelandflag.com/cleveland-flag-index

This is my previous homepage: https://www.clevelandflag.com/cleveland-flag. Now it is the second page visitors, er, visit.

Trouble is, once visitors are past the splash/landing page, the site title/logo/home link in the upper left hand corner of the header sends traffic back to the splash/landing page (because it is set as the home page). I can't figure out how to change it.  The link defaults to the page set as the home page--in this case the new splash page. Visitors then have to enter my site again. Can I change the default homepage link in my header so that visitors, once past the splash page, can stay within my site and not revisit the splash page?

From what I read, Squarespace 7.0 had a splash/landing page option, but it was discontinued in 7.1. The suggestion now is to build a blank page and turn off the header and/or footer, which I did. But now there's the issue of the homepage link returning visitors to a page they are only meant to see once.

I'd even accept disabling this link and adding a text "Home" link in the header navigation, if that were an option.

Any help is appreciated.

Oh, here's the kicker. I have the basic plan--no code injection.

 

Have you tried changing your home page?

Setting a homepage – Squarespace Help Center

2 hours ago, SOJU said:

Hi Squarespace community! 

While I was uploading an extensive information for one of our product, we've realised there's a small gap between photos we have been uploading. The photos were uploaded vertically in 'additional info' section of the product. Do I have to inject CSS code to custom CSS setting? If you could help out, that would be grateful. 

Can you share the direct link so I can take a look?

3 hours ago, pbjameson said:

This code didn't remove any of the underlines as far as I could tell. Maybe the other code I've used (above) overwrites that? I'm still interested in being able to control the underline thickness of the dropdown items mostly, but also curious if any/all of these underlines in the nav can be turned off (in the regular settings or with custom code)?

You can try the following CSS code

.tweak-global-animations-animation-type-flex .header-nav-folder-item a::after {
  content: none;
}

Let me know how it works

Have you added the image on desktop and image on mobile?

If yes, I can take a look

1 hour ago, BridleWoodDressage said:

I sell Dahlia Tubers and when a variety is sold out, it has the words 'Coming Soon' superimposed on the thumbnail of the product in my store....how do I revert to Sold Out, which is accurate?

Could you share your site URL, we can help easier

6 hours ago, MartinMurray said:

Any ideas on how to get rid of the cyan background on these links in the dropdown?... I have some custom CSS for the active link (1px cyan underline)... but it's also influencing the links within the drop-down.

What is your site URL?

6 hours ago, mollym said:

The site is https://www.ronin-productions.com/

I'm not able to see this issue, since I don't have a screen as big as my client's (27in). This is the screenshot he sent me, he says the About and Clients links don't work on a larger screen size. 

You can try adding to Custom CSS

.header-display-desktop .header-title {
  z-index: 0;
}

Let me know how it goes

6 hours ago, Sauceboss770 said:

do you know how i can use a separate image on mobile in my hero section then the one on my desktop

You can upload both the mobile and the desktop images, then hide the incorrect one as needed with custom CSS. Or you could even set up a whole section for desktop and another section for mobile, and hide each section.

12 minutes ago, tuanphan said:

Thank you! This code worked on my site.

Do you have code if users enable Form Block Lightbox button?

 

I'll look into it!

15 minutes ago, aldric said:

Hello BeyondSpace,

Please find attached some screenshots:

Things looks good on my end, just pm you

30 minutes ago, aldric said:

@Beyondspace

Hello Beyondspace,

I have done what you explain but gallery doesn't appear under image when I want to create a new block.

I had copy the code in the footer and a dropdown name exactly `Classic Gallery Pages`.

 

Thanks for your help!

Aldric

Have you refresh the site?

Also have you created blank page with gallery under that dropdown? Screenshot may help to debug

1 hour ago, KRAVEVIP said:

Hey!

So sorry, I completely forgot to add that for whatever reason.

URL is https://kravevip.com.au

Thanks!

You can try the following Css Code

/*Border style for product detail*/
.product-details.ProductItem-details {
  --border-size: 2px;
}

.ProductItem .ProductItem-details h1.ProductItem-details-title {
  border: var(--border-size) solid;
  margin-bottom: 0;
  padding: 15px;
}

.ProductItem-details .ProductItem-details-checkout {
  border: var(--border-size) solid;
}

.ProductItem-details-excerpt {
  border-bottom: var(--border-size) solid;
}

.ProductItem-details-checkout > div{
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

Let me know how it works on your site

10 hours ago, Sauceboss770 said:

https://flounder-cinnamon-c45l.squarespace.com/

Password website

How would i make my header navigation links be in a straight line

Not sure about your idea. I check that they are already on the same line now

Can you describe more detail or do you have any sample of result you want to achieve?

5 hours ago, imedinal said:

Hello! I hope you're doing well. I was wondering if you could help me with the CSS code to change my website's navigation link to an image?  Here is the link to my website: isaimedina.com. Im trying to change the work navigation link to show up as a png I created instead of the text. 

Thank you!

I can not see the navigation as you mentioned. Can you take some screenshot?

4 hours ago, jesspetro said:

I have a website, wareagleforge.com.

The default logo for the website is a black png. On several pages with dark headers, I've used code to make the logo white. The shop page is one example of a page with a dark background so I've used the code on that specific page to make the logo white. But it turns out that the product details pages inherit that change. My product details pages do not have a dark background for the header so you cannot see the white logo on the white background. I'd like to ONLY use the black logo on the product details page and NOT on the shop page. I've tried every example I could find online and nothing seems to achieve what I'm trying to do.

Any ideas?

This is the code I'm using on the shop page under settings>advanced>page header code injection to make the logo white on the dark header background.

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/65c65e0fea861123a7439f1d/e8435e52-c247-4757-8e74-aa4a3cc8053f/logo+with+name+larger+white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

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