How Can I Make A Page Section Smaller

Hello, 

is it possible to have my page section to be as small as it is in the picture below? Thanks! I can give more details if you would like/need it.

Any help would be brilliant 😄!

Can you share link to page in screenshot? We can help easier.

On 10/23/2020 at 5:23 AM, tuanphan said:

Can you share link to page in screenshot? We can help easier.

Yes! @tuanphan the link is https://inunzi.squarespace.com/config/

It’s wouldn’t let me copy and paste the page url, so just go to that link - scroll down the the footer, and then click on the test page “Shipping and Returns policy” 

Also tag me when you reply because I’m not getting notifications for some reason, is there a fix?

3 hours ago, inunzi said:

It’s wouldn’t let me copy and paste the page url

If you take your site out of preview you can then copy the URL for the page.

3 hours ago, inunzi said:

I’m not getting notifications for some reason, is there a fix?

Have you tried logging out and in? Check to make sure your browser/system is not blocking notifications.

On 10/21/2020 at 6:33 PM, inunzi said:

is it possible to have my page section to be as small as it is in the picture below?

Have you used the formatting options?

If so does it still need to be smaller? Which directions? Width? Height? Both? Is narrowing the width of the whole site an option?

1 hour ago, creedon said:

If you take your site out of preview you can then copy the URL for the page.

Have you tried logging out and in? Check to make sure your browser/system is not blocking notifications.

Have you used the formatting options?

If so does it still need to be smaller? Which directions? Width? Height? Both? Is narrowing the width of the whole site and option?

I’m trying to do it on a specific page, and yes I tried this options but they did not help. And also I would like both to be smaller to look like this.

It looks narrower than your example page to me. If you need your content even narrower you can drag the text blocks smaller and let the spacer blocks on the sides take more of the space.

5 hours ago, creedon said:

It looks narrower than your example page to me. If you need your content even narrower you can drag the text blocks smaller and let the spacer blocks on the sides take more of the space.

But would that make the section padding smaller or thinner so that it doesn’t take a lot of the background image space ?

3 minutes ago, inunzi said:

But would that make the section padding smaller or thinner so that it doesn’t take a lot of the background image space ?

Ah. So there is a background image that you want to reveal behind the page sections? Or a least that is the overall effect you want to achieve? A narrow center area that contains your content and then an image on the sides?

1 minute ago, creedon said:

Ah. So there is a background image that you want to reveal behind the page sections? Or a least that is the overall effect you want to achieve? A narrow center area that contains your content and then an image on the sides?

1. Correct, just like how in the ToryBurch’s policy page the image reveals its self by a lot.

2. Yes! But I would want my section to be skinny but have narrow contents.

17 hours ago, creedon said:

Ah. So there is a background image that you want to reveal behind the page sections? Or a least that is the overall effect you want to achieve? A narrow center area that contains your content and then an image on the sides?

Is it possible to do so?

I'm just exploring here.

You could add a background image which would make the content have a transparent background.

Then you could use something like the following to color the background content.

.page-section .content {

  background-color: #fff;
  
  }

Now the downside is that the taller the page section gets the more the background image has to expand. You might be able to get around that issue by breaking the page sections down into smaller bits and add the background image to each section so it doesn't have to stretch so much.

15 minutes ago, creedon said:

I'm just exploring here.

You could add a background image which would make the content have a transparent background.

Then you could use something like the following to color the background content.

.page-section .content {

  background-color: #fff;
  
  }

Now the downside is that the taller the page section gets the more the background image has to expand. You might be able to get around that issue by breaking the page sections down into smaller bits and add the background image to each section so it doesn't have to stretch so much.

Hmm so would this make the pages smaller or keep them the same size? Because it sounds like just changing the page sections background wouldn’t Help make it smaller/bigger but It might just be a thought, so I’ll try it later thanks!

On 10/26/2020 at 11:48 PM, creedon said:

I'm just exploring here.

You could add a background image which would make the content have a transparent background.

Then you could use something like the following to color the background content.

.page-section .content {

  background-color: #fff;
  
  }

Now the downside is that the taller the page section gets the more the background image has to expand. You might be able to get around that issue by breaking the page sections down into smaller bits and add the background image to each section so it doesn't have to stretch so much.

I will test out this code soon, because it actually sounds like a good idea 👍 I hope this works (fingers crossed)

1 hour ago, inunzi said:

I will test out this code soon, because it actually sounds like a good idea 👍 I hope this works (fingers crossed)

I think I found a solution!! Was your code going to make it smaller, because mines small but it just curious if yours was going to be smaller. 

I hadn't really thought much about the page section sizes. Other than to recognize that one long page section could be a problem.

24 minutes ago, creedon said:

I hadn't really thought much about the page section sizes. Other than to recognize that one long page section could be a problem.

Oh that’s fine. So do you know how to make the page sections a bit smaller then in the video above? If not it’s 100% because I like that size it’s not too big or small, and it reveals a lot of the background image.

I'm not sure what you mean by smaller. Width? Height? If you've set the Format for the page section to S and you want to go smaller with the width you can start from the following which is the S (narrow) rule set.

@media screen and (min-width: 768px ) {
    .page-section.content-width--narrow:not(.content-collection) .content {
        width:50%
    }

}

2 hours ago, creedon said:

I'm not sure what you mean by smaller. Width? Height? If you've set the Format for the page section to S and you want to go smaller with the width you can start from the following which is the S (narrow) rule set.

@media screen and (min-width: 768px ) {
    .page-section.content-width--narrow:not(.content-collection) .content {
        width:50%
    }

}

 

Thank you, I will try this code later👍

On 10/29/2020 at 5:27 PM, creedon said:

I'm not sure what you mean by smaller. Width? Height? If you've set the Format for the page section to S and you want to go smaller with the width you can start from the following which is the S (narrow) rule set.

@media screen and (min-width: 768px ) {
    .page-section.content-width--narrow:not(.content-collection) .content {
        width:50%
    }

}

 

Where should I paste this code?

26 minutes ago, inunzi said:

Where should I paste this code?

Design > Custom CSS

14 minutes ago, tuanphan said:

Design > Custom CSS

Thank you!

On 10/29/2020 at 5:27 PM, creedon said:

I'm not sure what you mean by smaller. Width? Height? If you've set the Format for the page section to S and you want to go smaller with the width you can start from the following which is the S (narrow) rule set.

@media screen and (min-width: 768px ) {
    .page-section.content-width--narrow:not(.content-collection) .content {
        width:50%
    }

}

 

I tried the code but it doesn't seem to be changing anything 😞. Do I need to add a collection id? 

28 minutes ago, inunzi said:

I tried the code but it doesn't seem to be changing anything 😞.

That is SS default code so if you want to go smaller go less than 50%.

24 minutes ago, creedon said:

That is SS default code so if you want to go smaller go less than 50%.

Ah thank you! I thought the code was already pre-set sorry. I’ll let you know if that works!

7 minutes ago, inunzi said:

Ah thank you! I thought the code was already pre-set sorry. I’ll let you know if that works!

Little update. The code is only resizing the text.