Jump to content

How Can I Make A Page Section Smaller

Recommended Posts

  • Replies 25
  • Created
  • Last Reply
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?

E7E43246-76FA-4C08-9151-817DBEB45876.jpeg

Link to comment
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?

615314131_ScreenShot2020-10-25at2_07_26PM.png.739bb2e76844375117ac398c5d7c2035.png

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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?

615314131_ScreenShot2020-10-25at2_07_26PM.png.739bb2e76844375117ac398c5d7c2035.png

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.320C4B0B-9901-4AB1-86FD-FA0B2AB59458.thumb.jpeg.3907c161c37fa4ee2c50ade16b68afc5.jpeg

 

Link to comment

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.

159725718_ScreenShot2020-10-25at4_22_44PM.thumb.png.696497ae43a1cd8ae063bdf3021ff40e.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

159725718_ScreenShot2020-10-25at4_22_44PM.thumb.png.696497ae43a1cd8ae063bdf3021ff40e.png

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

Link to comment
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?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Link to comment
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?

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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!

Link to comment
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)

Link to comment
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.

Link to comment

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%
    }

}

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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👍

Link to comment
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?

Link to comment
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? 

Link to comment
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%.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.