(Squarespace) Resize Section Background Image on Mobile

Pro Tips Other Tips
1

Squarespace has a problem, that is if you use Section Background Image, it will not display fullsize on Mobile.

I often help other members deal with it with code similar to this

@media screen and (max-width:767px) {
[data-section-id="6540146ce1bec020829ecc6e"] {
    min-height: 40vh !important;
}
}

However there is a small problem, if you have 20 sections having problems, you will need to fill in 20 data-section-id.

In case you make a website for a client, when the client creates a new section and encounters such a problem, it is very difficult for them to find the data-section-id and add it to the code.

Here is the solution.

We will insert a special code into these sections via Code Block, the code will identify and apply the resize code, without you needing to find data-section-id anymore.

First, you add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
 jQuery(document).ready(function($){
  $(".code-block .scale-bg-img").parents(".page-section").addClass("scale-bg-img");
$(".code-block .scale-bg-img").parents(".code-block").addClass("hide-code-block");
 })
</script>

Next, add this code to Website Tools > Custom CSS. This is code to resize image, so you can adjust number 40 in the code to value what you feel okay.

@media screen and (max-width:991px) {
section.scale-bg-img {
    min-height: 40vh !important;
}}
.hide-code-block {
display: none !important;
}

Next, edit sections where you have problem > Add a Code Block > Use this code

<div class="scale-bg-img hide-code-block"></div>

If you have any problems, just comment below or message me.
If you can’t install the code, you can message me with your site url, I can help you install the code.

2 Likes