Promotional pop-up mobile version image not showing

Site URL: https://www.daancoaching.com/

Hi,

I'm trying to create a promo pop-up but for some reason the image that shows on the web version disappears on the mobile version. Any code for this? I've been trying different things but nothing seems to work. See attached images.  

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

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

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

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 🙏

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

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 🙏

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

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;

}

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;

}

 

 

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?

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

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.

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.

I am running into a similar issue and cannot figure out why it is not working. Desktop view is popping up fine but the image I need is not displaying on mobile view. I only need the image to display.

11 hours ago, B-L said:

Desktop view is popping up fine but the image I need is not displaying on mobile view.

As explained above, this is by design. The mobile version of the promotional popup is not supposed to display images.