Jump to content

Momentum: Gallery on Mobile adding Text Background

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

@media screen and (max-width:736px) {
body.show-info-mobile .slideshow .slide .image-detail-wrapper {
    background: rgba(0,0,0,0.5);
    color: white;
}
}

 

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 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:736px) {
body.show-info-mobile .slideshow .slide .image-detail-wrapper {
    background: rgba(0,0,0,0.5);
    color: white;
}
}

That worked perfectly!! So quick! 

Thank you so much 🙂

image.png.30b7b7bae7ce8bec704052fc2a7ea08e.png

 

Link to comment
  • 3 weeks later...
14 hours ago, giorgiarossi said:

Hi @tuanphan 

Just a last question, do you also now how to make the text appear automatically in the mobile version? 

It works in the desktop version, but when you open the website with your smartphone you just see the picture and without text in my case they don't make much sense 😛 

Thank you!!

@media screen and (max-width:736px) {
.slideshow .slide .image-detail-wrapper {
	background: rgba(255,255,255,0.5) !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
5 hours ago, tuanphan said:

@media screen and (max-width:736px) {
.slideshow .slide .image-detail-wrapper {
	background: rgba(255,255,255,0.5) !important;
}
}

 

Hi Tuanphan,

Thank you for your quick reply, unfortunately it doesn't work, I still need to press the info button on the top right to show the text. 

If you see in the gallery styles there is the possibility to set the initial infoview, but apparently this applies only to the desktop version.

image.thumb.png.5e2be61fb9321f76d595cddd80697afb.png

Link to comment

Thank you for your quick reply, unfortunately it doesn't work, I still need to press the info button on the top right to show the text. 

above code doesn't solve this problem.

if you need to handle the above, it will need js, I guess, and it's quite complicated.

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

Archived

This topic is now archived and is closed to further replies.

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