HoaLT

Hi,

I have requirement related to the discount policy. My desired result is that: 

- On one order, if clients purchase the same product with a current one, they will get the discount for the second item only.

- The second item should be set with % discount rate.

I would like to know if it is possible on squarespace and if SQS can not support, is there any way that we can work around with it?

Many thanks!

2 hours ago, Kaiyo said:

hi, this solution puts it onto a new line but it doesn't remove the space between 'pursue' and 'your' so the text isn't properly centered. It also doesn't create the same line spacing as between 'your passion' and 'for music'. Any ideas to fix those issues?

Try adding space at the beginning and ending of "Your passion"

3 hours ago, JerryBez said:

Hi HoaLT, I don't think that my earlier reply was posted.

I just wanted to say how very much I appreciate all of your time and effort on my behalf. Your instructions from yesterday were easy to follow. Unfortunately, when I went to Design>Custom CSS, I saw the following notice:

"Note: Custom CSS does not apply to Cover Pages."

I appears that a modification isn't possible for my Home page. I'll just have to live with the white space beneath my photo on mobile phones.

Thank you again for trying to help me.

You can get some reference in this post with your cover pages

On 9/24/2021 at 11:28 PM, anauveme said:

Hi, I would like to know how should I do to create a link to a section, but then when I click that link it stays align with the bottom of the page. 

In other words, is it possible to create a link to when I click the section #2 remains there? 

 

Thanks! 

Do you mean that when you click a button, page will load to the section linked by button?

On 9/24/2021 at 10:02 PM, karadia said:

Site URL: https://aradia.io

Hello! My order confirmation page is clearly not designed well as the the spacing is much to closer to the header. I don't need to customize it too much, but I would like it to at least appear functional. Can someone help me with this? Is there a code I can inject?

Thank you. 

I can not access the page with the problem you described above. Can you share the direct link to this page?

1 hour ago, TakExplores said:

Site URL: https://swan-arugula-5f75.squarespace.com/

Site password: 12345678

Template: Carson

Currently my site shows both the social media buttons and the navigation bar. My home page already has the main navigation as an index page. 

I want to continue showing my social media buttons but make my main navigation a hamburger menu only on the home page. Is there any way to do this?

So in the screenshot attached, basically make "Home", "About", "Divisions", and "Contact" and hamburger, and always show the social media buttons.

Thanks so much in advance!

Is this what you mean?

11 hours ago, Oh_Mell said:

I am currently setting up a store with Squarespace and I am fairly new to it (more familiar with Shopify). I am using the theme "crosby" version 7.1. I have set up all the products with the collections being put into the "categories" tag. I have got all my collections displaying correctly however I would  like to add a custom banner too each collection page and ideally a block of images at the bottom. At the moment I can only add one which appears across all pages and from searching it seems you can only custom code it to get around this is that correct? I have attached an example to show what I mean. Thanks!

Can you share your site with the password protected for easier checking?

4 hours ago, Aidan2000 said:

Hi,

What im wanting to do is make the title of each product on the store page smaller. I have added some code to have 6 products in each row on the store page so i'm wanting the titles smaller. I'm aware you can change the Heading 4 size in the site styles section however when i change this its changing all of the Heading 4's within the site which is not what im wanting to do as there are several other heading 4's throughout the site that i don't want to be smaller. Is there a way to change the products so they use heading 1, 2 or 3 instead of 4? or is there some custom css code I can add to just change the product title font size not every heading 4 within the site?

Cheers

It would be easier to check your issues if you can share your site with the password protected!

22 minutes ago, Lux321 said:

Thank you!

This has helped removing some padding.

Unfortunately there is still a lot of white space left under the blog post. I am using Squarespace 7.1

Do you have any other solution?

You can set the addition figuration in Design > Custom CSS

#article- {
  padding-bottom: 0;
}

.item-pagination {
  padding-top: 15px;
}

On 9/25/2021 at 9:59 AM, BriWau said:

Site URL: http://werewoofbites.com

Hello, I was looking for answers to a few concerns on my mobile website. I have searched through the forum for the answers and found ways to fix other aspects, so I'm very appreciative of the Squarespace community. Any answers are greatly appreciated, thank you!

Site: werewoofbites.com

Password: 1234

All of the following concerns are on the homepage of my site for mobile view only.

 

• I need to move the button to the bottom of the image (2nd child *seen in "WW screenshot 1") or remove from mobile view. I did mess with the padding to make it move downwards, however the button is too big and gets cut off. So I would need code to make the button smaller if it can move lower in the image. the button circled in red is what I would need moved to or around the purple box 
• The 6th child ("Spooky Ingredients" *seen in WW Screenshot 2" ) should be cropped just like the desktop version and I don't know how to achieve that on mobile.  I messed with the padding, but again it didn't work. The purple box is what I need removed from the image
• The footer in my mobile version on all pages is out of proportion and tall. I was looking for code to make it into a row (left - right column). I tried previous code from @tuanphan on another thread, but I couldn’t get it to work . I'm not necessarily worried about the background image, as I have code to fix it.

1st Point:

You can try the Design > Custom CSS with the following setting

@media only screen and (max-width: 768px) {
	#block-yui_3_17_2_1_1632274074310_17542 .sqs-block-button-container--right {
		text-align: center;
	}
	#block-yui_3_17_2_1_1632274074310_17542 a {
		padding: 1em 1.404em;
	}
	[data-section-id="614a87c7f80dc06b128e4478"] .content-wrapper {
		padding-bottom: 0 !important;
		padding-top: 25vmax !important;
	}
	section[data-section-id="614a87c7f80dc06b128e4478"] {
		height: 36vh !important;
	}
	section[data-section-id="614a87c7f80dc06b128e4478"] .section-background {
		bottom: unset;
	}
}

1 hour ago, JerryBez said:

 

For the way to add Css, you could get a reference from this link

https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor

Or follow the steps on my Gif

8 hours ago, JerryBez said:

Site URL: https://www.jerrybezdikian.com

My home page photo appears full screen on my Desktop computer and my iPad, but on my iPhone, there's a white space that appears beneath the photo.

I was informed by Squarespace customer care that filling the entire screen with a photo on the home page on an iPhone isn't a feature with the Carson template. He suggested that it might be possible with custom coding, and that I post the question here.

I know nothing about coding, and would be most grateful for any assistance or guidance. Thank you in advance.

Try the following configuration in Desin > Custom Css

@media only screen and (max-width: 768px) {
	.homepage [data-slide-id="610c29e83f1f825f0dce7cfa"] img {
		height: 100vh;
		width: auto;
		position: relative;
		transform: translateX(-50%);
		left: 50%;
	}
}

On 9/25/2021 at 3:01 AM, dubwebdev said:

Site URL: https://www.anexceptionallife.com/

Hi All,

I've implemented a summary block (using lazy summaries plug-in) to get a carousel of quotes rotating towards the bottom of my homepage. Currently everything is functioning exactly as I intended with one exception. I would like to have the carousel auto-rotation pause when someone hovers over the quote.

https://www.anexceptionallife.com/

Does anyone know if there's a specific javascript snippet I can use to target that block and pause on mouse-hover?

Thank you!

You need to modify your javascript:

Replace with the following script

$(document).ready(function() {
    try {
        var container = Y.one("#block-d3fe1f534bd0f0631332");
        var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
        gallery.setAttrs({
            "autoplay": true,
            "autoplayOptions": {
                "timeout": 6000,
                /*make this higher to decrease speed, lower to increase it*/
                "randomize": true,
            }
        });
        container._node.addEventListener("mouseover", () => {
            gallery.setAttrs({
                "autoplay": false
            })
        })

        container._node.addEventListener("mouseout", () => {
            gallery.setAttrs({
                "autoplay": true,
                "autoplayOptions": {
                    "timeout": 6000,
                    "randomize": true,
                }
            })
        })
    } catch (e) {
        console.error("Could not configure Gallery autoplay.", e);
    }
});

Hope work well for you

The result should be like this

12 hours ago, taijiterasakistudio said:

Site URL: https://www.taijiterasaki.com/covid-memorial-scrolls

Hi, was wondering if there's a way to shorten the distance between the header and body of the website on mobile view? On Desktop view is fine. 

Try this in Design > Custom CSS

@media only screen and (max-width: 768px) {
  #headerWrapper header {
	padding: 0 0 10px 0;
  }  
}

13 hours ago, rachelb11 said:

Hi There,

I am currently trying to change the social icons (in navigation bar) on a single page.

On some pages I want there to be black icons with a light coloured photo in background, then on others white icons with dark coloured photo in background.

What is the coding to achieve this? I can change the colour globally on all pages but I can't work out how to change the colour on one individual page. 

Any help is appreciated in advance 🙂

Can you share your site with screenshot of your issue for easier support?

20 hours ago, Kaiyo said:

Site URL: https://www.kaiyosonics.com/

Is it possible to make this:

look like this:

on mobile only?

I just want a line break and no space after pursue as in PURSUE<br />YOUR PASSION 

just not sure of the code to implement it on mobile only

Cheers!

You can apply the following steps:

1. Home > Pages > Edit your heading > Set bold for "Your Passion"

2. Home > Design > Custom CSS

#block-5441a2f77e4fa42d5289 h1 strong {
    font-weight: inherit;
}

@media only screen and (max-width: 768px) {
	#block-5441a2f77e4fa42d5289 h1 strong {
    	display: block;
	}	
}

Hope that it is ok for your site!

Here is the result after remove padding

2 hours ago, Lux321 said:

Site URL: https://www.techy.how/

Hello!

I am desperately looking to customize the height of the white space under blog posts. In the Format options, my header spacing is set to a minimum. Under Site Styles, I am using 4vw Site Margin.

It still looks like there is so much white space directly under the blog post, and over the blog navigation.

Questions:

• How to remove (or at least reduce) the height of the white space
• How to potentially remove the (arrow) navigation at the bottom of the page

Thank you Squarespace community.

The space is created by the padding of conten-wrap. You can try adding in Design > Custom CSS

.content-wrapper {
  padding-bottom: 0 !important;
}

Hope that it is useful for you

Here is the result

6 hours ago, Dhowbearcat said:

Thanks HoaLT, 

   That did the trick! 

Do you happen to know how to make the carousel images bigger on mobile?

You can add configuration in Design > Custom Css

@media only screen and (max-width: 768px) {
	#block-yui_3_17_2_1_1632362346311_3023 .sqs-block-content, #block-yui_3_17_2_1_1632362655894_2919 .sqs-block-content {
    	height: 100px;
	}
}

6 hours ago, skywalker888 said:

Hi, 

Yes it's "Homes" thanks!

I can not find the problem with buttons in your site. Can you take a screenshot the button issue you want to fix?

Here is the result

59 minutes ago, stellachapman said:

Site URL: https://www.maxflowsolutions.co.uk/

Hi there

I'd like to reduce the size these icons appear on the mobile site, if anyone can help with code please?

Thanks
Stella

Some Css code could fix your issue (Home > Design > Custom Css)

@media only screen and (max-width: 768px) {
	section[data-section-id="60b75c513ab2dc7e99fcaacc"] .image-block-wrapper, #block-yui_3_17_2_1_1622629761448_10757 .image-block-wrapper {
      max-width: 50px;
      margin: auto;
  }
}

Hope it can help you

On 9/23/2021 at 8:47 AM, Dhowbearcat said:

Site URL: https://tulip-ranunculus-xc8d.squarespace.com/destinations

For some reason the image gallery I have set as a carousel on the page https://tulip-ranunculus-xc8d.squarespace.com/destinations will not center. I've tried a few CSS edits but none are working. 

Someone please help!

https://tulip-ranunculus-xc8d.squarespace.com/destinations

Password: "SuperTrip"

In Home > Page> Edit, you should hold and drag the spacer on the right of gallery.