Mobile

Site URL: https://www.imlouisechantal.com/photos2

Hi Everyone,

I'm very new at CSS and was hoping for some guidance. I've set up my gallery with a text hover over to display 2 photo sets. For the mobile view, I understand that a hover gesture isn't possible, but is there another way that I can display the title? The gallery is set up as a grid with title showing. Thanks in advance! I appreciate the help.

Below is the code that I used:

body.collection-type-index .color-weight-dark #logo img { -webkit-filter: invert(100%); filter: invert(100%); }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
font-family: omnes-semicond;
font-size: 40px;
font-weight: 300;
color: #000000;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
font-family: omnes-semicond;
font-size: 40px;
font-weight: 300;
color: #000000;
}
@media only screen and (max-width: 1024px) {
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { opacity: 50; }
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {
 opacity: .4;
 -webkit-transition: opacity .3s ease-in-out;
 transition: opacity .3s ease-in-out;
 -moz-transition: opacity .3s ease-in-out;
 -o-transition: opacity .3s ease-in-out;
 -ms-transition: opacity .3s ease-in-out;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; background-color: rgba(255,255,255,0); z-index: 9999; top: 40%; margin-bottom: 0%; opacity: 0; -webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { opacity: 1; }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 color: #ffffff; 
 opacity: 0;  
 font-size: 50px; 
 line-height: 100%;
 letter-spacing: 0px; 
 margin-bottom: 0px;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 color: #ffffff; 
 opacity: 100;  
 vertical-align: middle; 
 font-size: 50px; 
 weight: 100;
 line-height: 100%;
 letter-spacing: 0px; 
 margin-bottom: 0px;
}

@media only screen and (max-width: 1024px) {
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
color: transparent; 
opacity: 0;
}
}
@media screen and (max-width:767px) {
[data-section-id="5eca911272e6a72aacf7a277"] figcaption.image-caption-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
  overflow: hidden;}
}

Title overlay image or title under image?

Hi tuanphan,

Either would work. I'd love to see how both end up looking on mobile. 

Is there a way to get the title under the image only for mobile view? Thanks!

On 8/27/2020 at 6:38 AM, team-lovers said:

Is there a way to get the title under the image only for mobile view? Thanks!

Above link doesn't exist. Can you check again?

Sorry about that. I had to make the page live. 

http://www.imlouisechantal.com/photos

Thanks so much

Add to Home > design > Custom CSS

@media screen and (max-width:640px) {
.image-slide-title {
    opacity: 1 !important;
    font-size: 1.5rem !Important;
}
}