Jump to content

tweaking auto-layout list section for tablet (squarespace 7.1)

Go to solution Solved by tuanphan,

Recommended Posts

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

Hi,

I am tweaking my site (madeofair.com) for tablet format using custom css.

I am struggling with the "auto layout" list section. It looks good on desktop and mobile, but tablet is not looking good at all. Here is a photo of that: 

1985323192_ScreenShot2021-10-14at12_57_40PM.thumb.png.43957c4e4b9bf5f3e3a94d2cd549b31f.png

 

I tried a variety of css codes to change the margin, padding, width, etc, but I can't seem to find the write combination.

* note: this code is not correct * 

section[data-section-id="615b2fd71249de2a06ebdfcf"]  { 

   padding-left: -250px !important;

   padding-right: -250px !important;

}  

h1, .user-items-list-item-container * {

   font-family: 'geographmedium' !important;

  width: 25vw;

}

From my tests, I could successfully increase the size of the images and the text, but could not figure out how to extend the width of the content to make more space for the text to fit properly. I figured out how to manipulate the title font size, but then it was effecting all the H1 text on the site, which we do not want to do obviously haha. 

I would like to do one of the following:

  • 1) reduce the title font size so title text fits better 
  • 2) extend margin on left and right so the text has more space 
  • 3) shrink the overall size of the list section so all three items can have more space 

and of course, I am open to suggestions on what you think is best. 

Many thanks in advance, 

- Kristen 

 

 

 

Link to comment
  • Solution

Add to Design > Custom CSS

/* Homepage List section */
@media screen and (max-width:991px) and (min-width:768px) {
body.homepage .list-item-content h2 {
    font-size: 20px !important;
}
.user-items-list-item-container[data-section-id="615b2fd71249de2a06ebdfcf"] {
    grid-gap: 20px 20px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.