Jump to content

Promotional pop-up mobile version image not showing

Recommended Posts

Hi. Add to Design > Custom CSS

/* Mobile popup image */
div.sqs-slice-group.group-copy.copy-layer-background {
    background-image: url(https://cdn.pixabay.com/photo/2018/03/11/14/09/eggs-3216877__340.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
}

image.thumb.png.dbf1ba80e014b0a6d861d6bc676214b2.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...

Hi Tuanpan,

 

https://www.woestijnroos.store/

This worked perfectly for me, the only thing is that the position stays at the bottom.

If you compare that to the website view, it's not the needed result.

 

Shuld be somthing similar, the position more to the top and center.

 

Could you help me out?

 

Code I used:

 

/* Mobile popup image */
div.sqs-slice-group.group-copy.copy-layer-background {
    background-image: url(https://static1.squarespace.com/static/60f0526994a53d7d3d549237/t/610aa6fe2a5b1201c3660639/1628088064755/popup+copy.jpg) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Screenshot 2021-08-04 at 16.56.33.png

Link to comment
On 4/5/2021 at 12:07 PM, tuanphan said:

Hi. Add to Design > Custom CSS

/* Mobile popup image */
div.sqs-slice-group.group-copy.copy-layer-background {
    background-image: url(https://cdn.pixabay.com/photo/2018/03/11/14/09/eggs-3216877__340.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
}

image.thumb.png.dbf1ba80e014b0a6d861d6bc676214b2.png

Hi @tuanphan, I want to ask how to not make it as a background? Like, have it like on the top of the text? Because this is how it looks on desktop and I'd love for the image to also show on mobile, but not as a background. Will really appreciate  your response! Thank you 🙏

image.png.fff2c03627b12eab8e747e8adb95f6d1.png

Link to comment
On 8/4/2021 at 9:58 PM, Sven_Verheijen said:

Hi Tuanpan,

 

https://www.woestijnroos.store/

This worked perfectly for me, the only thing is that the position stays at the bottom.

If you compare that to the website view, it's not the needed result.

 

Shuld be somthing similar, the position more to the top and center.

 

Could you help me out?

 

Code I used:

 

/* Mobile popup image */
div.sqs-slice-group.group-copy.copy-layer-background {
    background-image: url(https://static1.squarespace.com/static/60f0526994a53d7d3d549237/t/610aa6fe2a5b1201c3660639/1628088064755/popup+copy.jpg) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Screenshot 2021-08-04 at 16.56.33.png

Hi. You mean image on top, text on bottom?

On 8/5/2021 at 1:39 PM, macydyeser said:

Hi @tuanphan, I want to ask how to not make it as a background? Like, have it like on the top of the text? Because this is how it looks on desktop and I'd love for the image to also show on mobile, but not as a background. Will really appreciate  your response! Thank you 🙏

image.png.fff2c03627b12eab8e747e8adb95f6d1.png

Hi. Can you share link to your site? We can check it again

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
  • 2 weeks later...

I used this below code but my text is going over the image, is there a way to move text down or size photo down and move to top of text?:

/* Mobile popup image */

div.sqs-slice-group.group-copy.copy-layer-background {

    background-image: url(https://static1.squarespace.com/static/58211e9a59cc688d3e2cf890/t/611d6f4436eb275974dad1f7/1629318980730/2021MIS-222-340.jpg) !important;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}

 

 

IMG_5971.jpg

Link to comment
On 8/19/2021 at 3:49 AM, omediano said:

I used this below code but my text is going over the image, is there a way to move text down or size photo down and move to top of text?:

/* Mobile popup image */

div.sqs-slice-group.group-copy.copy-layer-background {

    background-image: url(https://static1.squarespace.com/static/58211e9a59cc688d3e2cf890/t/611d6f4436eb275974dad1f7/1629318980730/2021MIS-222-340.jpg) !important;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}

 

 

IMG_5971.jpg

Hi. Can you share link to your site? We can check easier.

I think we can add a black overlay (with transparecy) + change text to white? What do you think?

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
  • 2 months later...

Hello everyone, having the same issue as above. Unable to get an image to pop up on a mobile device the same way it does on a computer with the promotional pop up.

I'd love for the image to be on the top with the text below the same as it is when it pops up on the website. Any help would be greatly appreciated.

Website is - bestpalusa.com

Link to comment
10 minutes ago, Yp01 said:

Unable to get an image to pop up on a mobile device the same way it does on a computer with the promotional pop up.

See my post below. In summary, this is by design. On mobile, the popup should be small.

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 11/8/2021 at 10:47 AM, paul2009 said:

See my post below. In summary, this is by design. On mobile, the popup should be small.

 

Thanks for taking the time to respond, much appreciated.

I wouldn't mind the image being the background to the pop up so the mobile version of the pop up remains the same size. However I am not sure how to then edit the font/text blocks so they are visible and easily read when they are over the image.

 

Link to comment
On 11/9/2021 at 4:48 PM, Yp01 said:

I wouldn't mind the image being the background to the pop up so the mobile version of the pop up remains the same size.

This rarely works in practice; the content can become confusing or unreadable for some users. Squarespace have chosen a good compromise - a smaller popup with text only.

Edited by paul2009
typo

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.