How to replace Text Block with Image on Mobile

Pro Tips Other Tips
1

To replace a Text with Image on Mobile Squarespace, you can follow these steps.
#1. First, you need to find the ID of the Text Block. Use this tool.

In my example, it is:

  • #block-fb7441e2bec4b1d3b324

image

#2. Use this code to Custom CSS box

@media screen and (max-width:767px) {
div#block-fb7441e2bec4b1d3b324 {
    display: inline-block !important;
    background-image: url(https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg);
    width: 250px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
div#block-fb7441e2bec4b1d3b324 * {
    color: transparent !important;
}}

image
image421×736 19.3 KB

#3. Result

image