Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

RESIZING BACKGROUND IMAGES ON MOBILE


HarKS

Question

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?

 

 

Screenshot 2020-10-28 at 12.31.05.png

Link to post
  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

20 answers to this question

Recommended Posts

  • 0
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?

 

 

Screenshot 2020-10-28 at 12.31.05.png

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;
}
}
Edited by inunzi
Link to post
  • 0
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 😁

Link to post
  • 0
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;
}
}
Link to post
  • 0

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

Link to post
  • 0

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}}

Link to post
  • 0

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

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...