Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Show Text Before Hover On Mobile Device


ryan_ball

Question

Site URL: http://www.ryanballphotography.com

Hi there, 

 

I have setup my homepage with three images as a grid:overlay. I have set this to show text after I hover, this is perfect for desktop browsers and I don't want to change this.  However for mobile devices, the text doesn't show (as the hover function does not work on touch devices). I therefore want to change this to "show text before hover" for mobile browsers, without affecting the desktop browser. So how do I keep "show text after hover" on the desktop browser and "show text before hover" on mobile devices. I'm using squarespace 7.1. web address is www.ryanballphotography.com.

 

Thanks 

Ryan

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > custom CSS @media screen and (max-width:640px) { .portfolio-text { opacity: 1 !important; } }  

7 answers to this question

Recommended Posts

  • 1

Add to Home > Design > custom CSS

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1 !important;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

This is exactly what I needed! Thanks Tuanphan!

Is there a way to increase the overlay opacity so that the text is more legible? Essentially forcing the hover state to be active all the time on mobile?

Also how would I change the colour of the text in the portfolio blocks only on mobile?

This is the website https://susanwalshart.com/portfolio

Link to post
  • 0
9 minutes ago, Pangus said:

This is exactly what I needed! Thanks Tuanphan!

Is there a way to increase the overlay opacity so that the text is more legible? Essentially forcing the hover state to be active all the time on mobile?

Also how would I change the colour of the text in the portfolio blocks only on mobile?

This is the website https://susanwalshart.com/portfolio

Add to Home > Design > Custom CSS

.portfolio-overlay {
    opacity: 1 !important;
}
/* text color on mobile */
@media screen and (max-width:767px) {
.portfolio-text h3 {
    color: red !important;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

I have tried to add this CSS and is not working. What am I doing wrong?

URL is: https://lily-lizard-l38c.squarespace.com/portfolio and password is JoelSmithDigital

Thanks,

Joel

 

Link to post
  • 0
6 hours ago, Joel_Smith said:

I have tried to add this CSS and is not working. What am I doing wrong?

URL is: https://lily-lizard-l38c.squarespace.com/portfolio and password is JoelSmithDigital

Thanks,

Joel

 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .design-layout-poster .image-card-wrapper {
    opacity: 1 !important;
    visibility: visible;
}
    .image-card-wrapper {
    background-color: rgba(64,64,75,0.75);
}
  }
</style>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
4 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  @media screen and (max-width:767px) {
  .design-layout-poster .image-card-wrapper {
    opacity: 1 !important;
    visibility: visible;
}
    .image-card-wrapper {
    background-color: rgba(64,64,75,0.75);
}
  }
</style>

 

Legend! Thank you so much!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...