ontodont 1 Share Posted July 22, 2020 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
0 tuanphan 9,338 Share Posted July 24, 2020 Hi. Which title? You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 ontodont 1 Author Share Posted July 24, 2020 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
Question
ontodont 1
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
Top Posters For This Question
2
1
Popular Days
Jul 24
2
Jul 22
1
Top Posters For This Question
ontodont 2 posts
tuanphan 1 post
Popular Days
Jul 24 2020
2 posts
Jul 22 2020
1 post
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment