RESIZING BACKGROUND IMAGES ON MOBILE

Hi All,

This question seems to have an impossible outlook. I have been trying to resize 'background-images' on mobile in 7.1. As you may know, background images can either be 'full bleed' or 'inset'. I prefer to use 'full bleed', however, in mobile, it just doesn't look right. I don't want to make compromises.

As you can see from my attached file, I essentially want to shrink my background image, so all of it fits in. 

Any solutions?

12 minutes ago, HarKS said:

Hi All,

This question seems to have an impossible outlook. I have been trying to resize 'background-images' on mobile in 7.1. As you may know, background images can either be 'full bleed' or 'inset'. I prefer to use 'full bleed', however, in mobile, it just doesn't look right. I don't want to make compromises.

As you can see from my attached file, I essentially want to shrink my background image, so all of it fits in. 

 

Any solutions?

 

 

Try this code by tuan. Paste this code in your custom css located in your design menu. 

@media screen and (max-width:767px) {
.collection-ID Here.view-item #page section:nth-child(1) {
    min-height: 50vh !important;
}
}

1 minute ago, inunzi said:

Try this code by tuan. Paste this code in your custom css located in your design menu. 

@media screen and (max-width:767px) {
.collection-ID Here.view-item #page section:nth-child(1) {
    min-height: 50vh !important;
}
}

Let me know how it goes 😁

Hi, Unfortunately, nothing happened with this

1 minute ago, HarKS said:

Hi, Unfortunately, nothing happened with this

Hmm that’s weird. Are you on 7.1 or 7.0?

Just now, inunzi said:

Hmm that’s weird. Are you on 7.1 or 7.0?

Also did you delete “ID HERE” with your collection Id?

1 minute ago, inunzi said:

Also did you delete “ID HERE” with your collection Id?

So for example it could look like this.

@media screen and (max-width:767px) {
.collection-5e77e8500ff82c23205f2869.view-item #page section:nth-child(1) {
    min-height: 50vh !important;
}
}

Would you like me to find your collection Id for you?

Definitely replaced the ID correctly, and 7.1

11 minutes ago, HarKS said:

Definitely replaced the ID correctly, and 7.1

Wait so did you finish it yet? It’s sounded like sarcasm 😅

No sarcasm. I replaced the collection ID as I have a block identifier 

1 hour ago, HarKS said:

No sarcasm. I replaced the collection ID as I have a block identifier 

Oh ok. Did that work?

No it did not do anything.

The only css that had some effect was

@media screen and (max-width:767px) {
[data-section-id="5f95e4dc3867be310249b267"] {
    min-height: 80vh !important; padding:49.9px;
}
}

It was posted by Tuan on a different thread. But not much changed as you can see from my first post in this thread

Can you share site url? We can check easier

I sent you my URL and Passcode

I tried this, but nothing happened also

@media screen and (max-width:767px) {
[data-section-id="5f95e4dc3867be310249b267"]

.section-background {background: url ("https://static1.squarespace.com/static/5f00b8715206ef2e13b8f42b/t/5f9832477fd0716136af4379/1604248792602/Banksy.jpg");

background-size:contain !important}}

12 hours ago, HarKS said:

I sent you my URL and Passcode

Can you share? I don't see

https://agirlaftermyownheart.squarespace.com/config/design

@tuanphan @HarKS did you figure out a solution? I have the same issue on 7.1

I'd recommend designing a separate section specifically for mobile where you can even use a different image

and use CSS to
Hide the Desktop Version on mobile
Hide the Mobile Version on desktop

something like:

@media only screen and (max-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"]
{display:none}}


@media only screen and (min-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"]
{display:none}}

You need the find the section ID with the Browser Site Inspector

3 hours ago, lisbet said:

@tuanphan @HarKS did you figure out a solution? I have the same issue on 7.1

Can you share site url?

2 hours ago, ArminB said:

I'd recommend designing a separate section specifically for mobile where you can even use a different image

and use CSS to
Hide the Desktop Version on mobile
Hide the Mobile Version on desktop

 

something like:

@media only screen and (max-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"]
{display:none}}


@media only screen and (min-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"]
{display:none}}

You need the find the section ID with the Browser Site Inspector

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en