Jump to content

Promotional pop-up mobile version image not showing

Go to solution Solved by paul2009,

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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
  • Solution
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.

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • 1 year later...
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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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.