Jump to content

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

Recommended Posts

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

Link to comment

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 best , and see my profile. Thanks for your support!

Link to comment

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 :)

Link to comment
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 best , and see my profile. Thanks for your support!

Link to comment

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

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.