Jump to content

Promo Popup: Image background not showing on mobile

Recommended Posts

  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy {
    background: url("IMAGE URL");
}

 

Edited by rwp
Link to comment
4 minutes ago, rwp said:

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy {
    background: url("IMAGE URL");
}

 

Where do I input this? And I how do I get image URL link for photo? 

Link to comment
3 minutes ago, rwp said:

To add CSS, go to Design -> Custom CSS

I can get you the url, but the pop up needs to be active on your page, and its turned off again.

I thought of another option: adding the image to the gallery slider at the top of the homepage instead of the popup. What do you think? Looks fine on desktop though but not on mobile. 

06.27 midyear sale_web.png

06.27 midyear sale_post-2.png

Screen Shot 2020-06-28 at 11.31.47 AM.png

WhatsApp Image 2020-06-28 at 11.33.45 AM.jpeg

Link to comment
  • 1 year later...
  • 5 months later...
On 4/19/2022 at 1:09 AM, firecrustpizzeria said:

I am having the same issue, unsure of where/how to input any code to get the image to show up on Mobile .

https://www.firecrustpizzeria.com/ 

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.sqs-popup-overlay-content .sqs-slide {
    position: fixed !important;
    top: 0 !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img {
    opacity: 1 !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    display: block !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    z-index: 1000 !important;
}
}

 

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...
On 4/22/2022 at 3:48 PM, tuanphan said:
@media screen and (max-width:767px) {
.sqs-popup-overlay-content .sqs-slide {
    position: fixed !important;
    top: 0 !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img {
    opacity: 1 !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    display: block !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    z-index: 1000 !important;
}
}

Hi @tuanphan I'm using the above code - it works to show the image in the mobile promo popup, but now the content (where all the copy is on the right hand side) is cut off, half of it now sits behind the image??

https://jeanine-thompson.squarespace.com/ password: tuansqsp

Link to comment
On 5/4/2022 at 7:17 PM, Iwan said:

Hi @tuanphan I'm using the above code - it works to show the image in the mobile promo popup, but now the content (where all the copy is on the right hand side) is cut off, half of it now sits behind the image??

https://jeanine-thompson.squarespace.com/ password: tuansqsp

What should it look like? Text under image, text overlap image or?

lookl.png.93c2a43c6b3e8a0ac67f9615e9df7218.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

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.