Jump to content

Cannot get my background image to stop being cropped on all pages, tried multiple codes - Squarespace version 7.1

Recommended Posts

Site URL: http://www.crackedpaintstudios.com

Hi everyone! I deleted every code I've tried and decided to start fresh.

Can someone help me stop my banner from being cropped? I used the same pixel size as was recommended, I tried what Squarespace recommended with the duplicated sections and their code. I used other codes with the appropriate section ids. It didn't work at all. Any help would be appreciated. Thank you!

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 3/8/2021 at 10:54 PM, crackedpaintstudios said:

@tuanphan Thank you so much for responding. It works on landscape mode on a tablet, but if it's profile, then it cuts the banner off on tablets, too. It's the banner both on the home page and on the Projects page. 

Hi. Sorry for the delay. First remove these code

 img {
  border: 2px solid black;
  }
@media screen and (max-width:780px) {
[data-section-id="60327f25c0c23b2ccbc2d6ac"] .section-background img {
    width: 100% !important;
	height: 52% !important ;
}

add this code to DESIGN > CUSTOM CSS

/* resize tablet - mobile banner */
@media screen and (max-width:991px) {
body.homepage article section:first-child {
    min-height: 30vh !important;
}
}
@media screen and (max-width:767px) {
body.homepage article section:first-child {
    margin-top: 10vh;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
20 hours ago, crackedpaintstudios said:

@tuanphan Thank you so much! That absolutely worked!! 

Is there a way to do the same thing with my Project and Shop pages? I tried just putting in the same code, but it does not have the same effect, even when I remove other code. Thank you so so much for your help!

You mean this image?

image.thumb.png.5d1845fcfc5694dae26be5c4ed6eaf1e.png

and this?

image.thumb.png.c264368c9cd36ad094b60294beb0c31c.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
17 hours ago, crackedpaintstudios said:

@tuanphan

Yes, that image that is both on the Projects page and the Shop page. 

Hi. Too long. You mean resize banner image on mobile?

https://www.crackedpaintstudios.com/

https://www.crackedpaintstudios.com/projects

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.