Jump to content

Momentum: Gallery on Mobile adding Text Background

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

58 minutes ago, tuanphan said:

Can you take screenshot info text on mobile? I don't see any text.

You have to press the small black circle with the "i" on the top right corner.
Also, is there a way to directly show the text without pressing that button?

 

Thank you!!

image.png.bcbe7d2972306b9cb1f897d1565c0961.pngimage.png.6108703c324b4b71e55ae1341a3c27d2.png

Edited by giorgiarossi
Link to comment

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

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

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.