custom-css How to make hovered images disappear on mobile

Site URL: http://www.afarnum.com/projects

I've designed a site that has pages with a markdown block. That block has links and images that appear on HOVER. All done through the master css window. The problem is that the image sizes are set and when viewing on mobile, I want them to disappear and to just see the menu. Here is the code that is used for each link:

}

.titles2:hover:before {
    content: '';
    width: 900px;
      left: 30vw;
      top: 50px;
    height: 600px;
      margin-top: 50px;
    display: block;
    position: absolute;
    background: url(https://static1.squarespace.com/static/59171f2ecd0f68c07c2b19b5/t/61f72297b1c3341d379ad0a0/1643586200102/D1-cafe-03279.jpg) center top no-repeat;
    background-size: contain;
    margin: 0 auto 0% !important;
  
}
 

Is there a way to do this? Thanks!!

On 2/15/2022 at 5:11 AM, afarnum said:

Site URL: http://www.afarnum.com/projects

I've designed a site that has pages with a markdown block. That block has links and images that appear on HOVER. All done through the master css window. The problem is that the image sizes are set and when viewing on mobile, I want them to disappear and to just see the menu. Here is the code that is used for each link:

}

.titles2:hover:before {
    content: '';
    width: 900px;
      left: 30vw;
      top: 50px;
    height: 600px;
      margin-top: 50px;
    display: block;
    position: absolute;
    background: url(https://static1.squarespace.com/static/59171f2ecd0f68c07c2b19b5/t/61f72297b1c3341d379ad0a0/1643586200102/D1-cafe-03279.jpg) center top no-repeat;
    background-size: contain;
    margin: 0 auto 0% !important;
  
}
 

Is there a way to do this? Thanks!!

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1643408042301_15100 [data-preserve-html-node]:hover:before {
    content: unset !important;
  } 
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you