Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

1 Follower

Personal Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

sfphotogirl's Achievements

  1. Thank you, @tuanphan! This is the code that worked for me. I had to adjust the media query for any screen under 1600px, and then it worked. This is the code I used: .fe-62d9a23d2d38e30dabb7944c { grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important; } @media screen and (max-width:1600px) { .fe-62d9a23d2d38e30dabb7944c { grid-template-rows: repeat(6,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important; } } Note that I used separate code to hide the whole section on mobile, so you will see that on the test site.
  2. Thank you! I tried it on my test site. It worked on large screen, but the padding still shows on small screens, unfortunately. Question: Is the class that starts with ".fe-62d..." what we should use to target sections now, instead of a section ID?
  3. Yes, that is the padding! In non-FE 7.1 I can remove that padding with code, but it doesn't work with FE.
  4. @bangank36 Thanks for your help, but it didn't change anything for my test site (the background for that section was already white). You can see it especially on slightly smaller screens, like this: My test site is here, if you want to take a look: https://alligator-chimes-ysk2.squarespace.com/ (password: tester)
  5. I see the padding. I'm having a similar issue with my fluid engine test site, except the padding is both top and bottom. Note that the white bars you see on the sides of the images come from IG and are not Sqsp padding. The problems are only thin strips at top and bottom.
  6. Ah, thanks! It's working now. Perfect! Home page didn't stack, but portfolios are stacking on tablet. Final CSS is this: @media screen and ( max-width : 1000px ) { .twc-collection-type-portfolio [class*=sqs-col] { float : none !important; width : auto !important; } }
  7. I spoke a bit too soon! Code appears to work on everything except an iPad (slightly larger tablet). The code I added to CSS is currently this (after adding your code to Header Code injection). Maybe I have the selector slightly wrong? @media screen and (max-width: 1000px) {.item-pagination[data-collection-type^="portfolio"] { float: none !important; width: auto !important; } }
  8. Thank you! This worked perfectly. I'm so pleased!
  9. This sounds fine! I don't have much experience with javascript, but I have heard of this method before. I always instruct my clients to buy the business plan, so that is no issue.
  10. Here is the trial site I'm testing. Right now I'm trying some code that stacks this page on tablet/mobile, but unfortunately the code also affects other pages. The Home page looks weird stacked on tablet, so that is really what I want to exclude from the CSS. https://cat-parrotfish-4eaj.squarespace.com/portfolio-1/point-reyes (password: tester) Here is the code I tried out: @media screen and (max-width: 800px) {.layout-engine-section [class*=sqs-col] { float: none !important; width: auto !important; } }
  11. Not sure how unique the set of targetable elements are – I'm placing a column of text next to a gallery block of stacked images, sort of like the Montauk 7.0 gallery pages. My clients like that layout, so I'm replicating it in 7.1. It's different from the default Squarespace layouts, because of the columns. The CSS I want to use will ideally tell portfolio pages only to stack on tablet view. But I don't know how to exclude the other pages.
  12. @creedon Thanks for your reply. My hope is that my clients wouldn't touch the layout of the duplicate portfolio page, but just add new artwork. My challenge has been finding a way to get CSS to apply to pages that don't yet exist (because they haven't been duplicated yet). I have inspected portfolio pages and haven't found a specific selector to target that is only for portfolio pages.
  13. Thanks so much for answering. Would it be necessary to add this code to each portfolio page my client duplicates? Is there something/some selector that affects all portfolio pages on a site but not other kinds of pages?
  14. @tuanphan @bangank36 Is there a way to target portfolio pages as a class (keeping other pages untouched), so that any CSS would apply to duplicate pages my clients make? I created a custom layout for portfolio pages that they might want to duplicate for new bodies of work. Collection IDs wouldn't work on my clients' future duplicate pages, unless they hired me to add CSS later.
  • 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.