Jump to content

Removing site title constraints and bottom padding on inset banner photo

Recommended Posts

Hello!

I added CSS from another discussion thread here to remove the site title constraint and allow all words to be on one line. The code did not work for this website.

The second issue, the client prefers the banner photos inset with a right and left border, but they do not want that space below the inset banner photo. Is it possible to remove the space below the inset but leave the right and left margins as-is on an inset?

Thank you!

Screenshot 2023-10-27 at 10.53.32 AM.png

Screenshot 2023-10-27 at 10.59.33 AM.png

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hey @mcafee.michelle! Do you have a link to a preview of the website (it can be password-protected)? Also I am not quite sure I understand what you are saying regarding the second issue.

Daniel Rodrigues | Excito LLC
Squarespace Web Design for Photographers & Creatives
🌐 https://www.excitollc.com/ | βœ‰ Contact Me: daniel@excitollc.com
πŸ’‘ Squarespace Enthusiast | πŸ“– Squarespace Design Blog for Photographers
🀝 Always happy to help and collaborate! Connect with me on LinkedIn.

Link to comment

Hello @InspirerdΒ thanks for responding.Β 

https://wrangellmountainsfieldstudies.squarespace.com/

PW: MountainsRock

Β 

I've attached another photo showing the 2nd issue. This is a banner photo below site title/navigation and the client wants it inset. They want white padding on right and left of banner photo, but the template also pads under the photo. The client wants the page content up closer to the bottom of the banner photo, but the padding won't allow it. I'm looking for a CSS option to remove the padding below the inset photo.

Β 

Thanks!

Screenshot 2023-10-27 at 11.16.18 AM.png

Link to comment

Hey @mcafee.michelle! The screenshot you attached is broken for me, but I took a stab at it anyway.Β 

Regarding the first issue, there seems to be a syntax error in your CSS code. The CSS code you added, specifically the code for the title is prefixed by some malformed style properties that aren't inside a selector grouping. When I removed that and just kept the code for the title style, it worked.

.header-display-desktop {
    flex-direction: column
}

Regarding the second issue. I am not sure if there isn't an option in the editor. But in case there isn't, here is some code that should fix it, but double check to make sure it doesn't mess up any other pages.

.page-section.background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
    padding-bottom: 0;
}

.background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) .section-background {
    bottom: 0;
}

Let me know how that goes.

Daniel Rodrigues | Excito LLC
Squarespace Web Design for Photographers & Creatives
🌐 https://www.excitollc.com/ | βœ‰ Contact Me: daniel@excitollc.com
πŸ’‘ Squarespace Enthusiast | πŸ“– Squarespace Design Blog for Photographers
🀝 Always happy to help and collaborate! Connect with me on LinkedIn.

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.