Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How Can I Make A Page Section Smaller


inunzi

Question

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 😄!

Screen Shot 2020-10-21 at 7.56.12 PM.png

Edited by inunzi
Link to post
  • Answers 25
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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

Posted Images

25 answers to this question

Recommended Posts

  • 0
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

Edited by inunzi
Link to post
  • 0
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?

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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?

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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 post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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)

Edited by inunzi
Link to post
  • 0

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0

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

}

 

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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 post
  • 0
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%.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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!

Link to post
  • 0
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.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...