Jump to content

How do I stop the Brine template from zooming in on my cover banner?

Recommended Posts

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

Is there any way to preserve the original size of an image when using as homepage banner? My site is https://www.carolyntaraoneil.com, and you can see that Squarespace keeps zooming in, ruining the image entirely by cropping the edges off. 

I'm in version 7.0, Sonny template (Brine family), and I don't seem to have the ability to edit css. Thank you.

Link to comment
  • Replies 9
  • Views 1.3k
  • Created
  • Last Reply

If you want to continue to use the parallax feature I would say no. That feature is doing what it needs to create the effect and display as much of the image it can without cutting off to much of one dimension or the other ( h, w ).

You could lose the effect and try with a regular image block at the top of the page.

What happens when you go to Design > Custom CSS? Do you see something like the following?

774883823_ScreenShot2021-01-29at4_52_00PM.png.fb3ef45a051902b572e064eeac7a2d42.png

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.

Link to comment

Thanks for the reply. When I go to that CSS page, the white box at the bottom (where you have your code) is blank. 

As for parallax, I can disable it, but that doesn't change the appearance of the image at all -- it's still cropped. 

I don't think this template has the ability to add an image block to the homepage. 

Link to comment

Well, other than the (blank) white box, it looks exactly the same as Creedon's picture. Is there a way to solve this with css? 

You're right, I figured out how to add an image block, thanks for the tip. But that doesn't seem to work any better -- the fit is just as awkward as using the banner. 

Any other suggestions?

Link to comment
3 hours ago, CarolynTara said:

As for parallax, I can disable it, but that doesn't change the appearance of the image at all -- it's still cropped. 

Both parallax and background images will be cropped. My question about the parallax was more if you were married to having that feature enabled for that page and that image.

I think what you want can be achieved using an image block and some CSS.

This first image is from your site.

669022885_ScreenShot2021-01-29at8_39_14PM.thumb.png.1bb971b971db397dd9a06e362f622874.png

This second image is from my test site using an image block and CSS.

298580737_ScreenShot2021-01-29at8_40_58PM.thumb.png.bfa25144586163c21663ef144f2742fa.png

You'll notice that the sides are not cropped.

I'm only part way to seeing if a fully working effect can be achieved.

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.

Link to comment
1 minute ago, CarolynTara said:

Howe did you get there?

As I said I'm not there yet but so far it is going pretty good. Dealing with mobile is next.

The basic concept is to use an image block. Then manipulate it to be full bleed. Plus a number of other tweaks.

I'll take a crack at the mobile tomorrow.

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.

Link to comment

I would try this effect on a test index page first.

837903798_ScreenShot2021-01-30at3_19_16PM.png.35123e5aebe71f8d4a60a8f4ba5e0980.png

Once your test index page set up on the first page of the index add an image block, upload your image, and select poster for design.

608976429_ScreenShot2021-01-30at3_21_43PM.png.7ceefa03b1f59dbc9c013131e3e53187.png

Put your name in the title.

749944133_ScreenShot2021-01-30at3_23_49PM.png.2f10e7897b5bebc8e47fb2e5b228d85d.png

Add a code block above the image block.

1385040135_ScreenShot2021-01-30at3_25_47PM.png.63c57a9855ce979421bb5b16a489ee37.png

Enter the following in the code block.

<style>

  .Index-page:first-child .Index-page-content {
  
    padding-left : 0;
    padding-right : 0;
    
    }
    
  .Index-page:first-child .sqs-block-image .design-layout-poster .image-title-wrapper {
  
    font-size : 9.875vw;
    
    }
    
  .Index-page:first-child .sqs-block-image .design-layout-poster .image-title p {
  
    color : #084d96;
    font-family : eds-market-main-script;
    letter-spacing : 0.1em;
    
    }
    
  @media screen and ( max-width : 480px) {
  
    .Index-page:first-child .sqs-block-image .design-layout-poster .image-title-wrapper {
    
      font-size : 15vw;
      
      }
    }

  </style>

1340522965_ScreenShot2021-01-30at3_29_26PM.png.0b81bb07c8309ddd891488bc9ead93f2.png

Click the APPLY button and SAVE the page.

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.

Link to comment

Thank you so much for helping! What I ended up doing is editing the image in photoshop to add a white rectangle at the top and bottom. Squarespace seemed to recognize this as part of the image (just adding a "border" in PS didn't work). So the portion of the image that's cut off at top and bottom is just the extra whitespace. It looks pretty much like what I was going for now.

I appreciate all the help!

Link to comment

Archived

This topic is now archived and is closed to further replies.

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