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

Hiding title text on mobile only


ontodont

Question

Site URL: https://www.nickdavid.co.uk/

Hi,

I have some custom code that allows title to appear on hover on desktop. 

I have it currently so the effect is disabled from mobile as it is not necessary or helpful to ave hover there. 

But, my question is, now the mobile site is showing the title by default on mobile underneath each image.

How can I hide title from mobile, but still have my hover effect?

Here is the code:

@media only screen and (min-width:834px) {

  .yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {
    background: transparent !important;
}
  

/* increase image transparency on hover */ 
  img.summary-thumbnail-image.loaded:hover 
  { 
  opacity: 100;
  }
/* display title on hover*/ 
  .sqs-block-summary-v2 .summary-item .summary-title 
  a{ 
  background-color: transparent; 
  opacity: 0; 
  color: #fff; 
    position: absolute;
     left: 0;
     right: 0;
     top: 40%;
     margin-left: auto;
      margin-right: auto;
 
 
  }
 

  .sqs-block-summary-v2 .summary-item:hover .summary-title 
  a{ 
  background-color: transparent; 
  opacity: 4; 
  color: #353535; 
  position: absolute;
    top: 50%;
    left: 60%;
      transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%); 
    margin-left: auto;
      margin-right: auto;
 
  }
/*style title font hover for summary wall block*/
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: europa;
font-weight: 600;
font-size: 25px !important;
color: #33cccc;
text-transform: uppercase;
 } }
/*eliminates white space between thumbnails*/
.summary-thumbnail-container,
.summary-title {
margin-bottom: 0 !important;
}


}
 

Thank you for all you help.

 

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

Hi,

/*style title font hover for summary wall block*/
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: europa;
font-weight: 600;
font-size: 25px !important;
color: #33cccc;
text-transform: uppercase;
 } }
 

The summary wall block title. The one that appears when you hover over image block

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