Jump to content

Adjust content width for a list section – make narrower on desktop

Recommended Posts

Posted

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

Is there a way to make the content width for a list section narrower on desktop/tablet?

I’d like the four panels to keep the same two column compsition as in the screenshot, but to be narrower in width and central on the screen with generous space either side. With short content in the panels it feels necessary for them to be that wide. I can increase spacing between the panels but that doesn't achieve the right result.

I’d appreciate any advice – thank you!

Screenshot 2022-06-09 at 17.52.37.png

Posted

Please see Page Section Auto Layout Simple List Format Class Add.

Using my code on your site locally I was able to produce the following.

775152997_ScreenShot2022-06-09at3_53_00PM.thumb.png.4c813aba6848272f45aebaa127d44c56.png

The setting I used was...

content width : medium

You will see that the Digital Marketing Services has wrapped. This not a bug in my code but a natural consequence of making less width available for the items. My code gives you the ability to apply Format settings from a normal page section, which an auto layout does not.

Let us know how it goes.

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.

Posted

Hi Creedon

I appreciate your time as that's exactly what I was after (I understand longer content will cause text to wrap) but I'm clearly not digital savvy enough when it comes to code injection – I can't get it to work! The extra 'invisible' item can be seen and the width hasn't adjusted.

I was hoping it could be solved with CSS to target that section, but I may just have to live with it.

 

Thanks anyway :)

Posted
9 hours ago, andrea_beehive said:

I was hoping it could be solved with CSS to target that section

I think it could be addresses with CSS alone. I figured since you have jQuery installed that my solution might work for your need.

What my code does is add the classes that you would normally get with a regular page section, to the auto layout section, CSS really, just aided with a little help from my code so you don't have to write a bunch of CSS.

If you'd like to make a duplicate of that page, add the code to the duplicate, and add the item to the content, I'd be happy to look at the duplicate page and see what might have gone wrong. That way you don't disturb the production page.

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.

Posted

Thanks Creedon – I am actually sorted now! 🙂

was provided a css solution by a lovely facebook group.

I'll share it here incase useful to anyone else:

/*decrease list section width */
data section ID here {
   .user-items-list{
      padding-left: 10vw ;
      padding-right: 10vw;
   }
}

I made it apply to desktop only by wrapping it in CSS query:

@media screen and (min-width:768px) {
paste CSS code here.
}

Create an account or sign in to comment

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

×
×
  • 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.