Caption overlay running outside thumbnail on mobile.

Site URL: https://daffodil-denim-9jre.squarespace.com/office-buildings-working-environments

Hello,

I am using custom CSS to display an orange overlay and some text (the caption) on hover. The problem is on mobile, the text runs outside the the thumbnail. The space between the lines seems excessive, and the font size could but smaller. Any suggestions? Thanks in advance.

site: https://daffodil-denim-9jre.squarespace.com/office-buildings-working-environments
pass is 20demo21

<style>
/* Simple Grid Gallery w Text */
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    color: white;
  	font-size:1.2rem !important;
  	font-weight:bold !important;
  	text-align:center;
  	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
	pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #df6a2e; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.8;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

Don't remove any code in your current code. 

Add this code under above code

<style>
  @media screen and (max-width:767px) {
  figure.gallery-grid-item.has-clickthrough * {
    font-size: 12px !important;
}
  }
</style>

10 hours ago, tuanphan said:

Don't remove any code in your current code. 

Add this code under above code

<style>
  @media screen and (max-width:767px) {
  figure.gallery-grid-item.has-clickthrough * {
    font-size: 12px !important;
}
  }
</style>

 

I ended up changing it to 13px and adding

    line-height: 1.25;!important;

I am truly grateful, thank you so much!

On 6/10/2021 at 8:37 PM, spacecowboy said:

I ended up changing it to 13px and adding

    line-height: 1.25;!important;

I am truly grateful, thank you so much!

Want to fix these?

Site URL: https://daffodil-denim-9jre.squarespace.com/?password=20demo21

1. (Tablet-Homepage)

2. (Tablet-Homepage)

3. (Tablet-Homepage/Footer)

4. (Mobile-Media) Move video to top of text?

5. (Tablet-Overlay) Add a space between lines?

3 hours ago, tuanphan said:

Want to fix these?

Site URL: https://daffodil-denim-9jre.squarespace.com/?password=20demo21

1. (Tablet-Homepage)

2. (Tablet-Homepage)

3. (Tablet-Homepage/Footer)

4. (Mobile-Media) Move video to top of text?

5. (Tablet-Overlay) Add a space between lines?

18 hours ago, spacecowboy said:

 

That would be great!

I thought I got ahead of those homepage issues, but I hadn't tried it on a tablet. So many moving parts to follow!

Add to Design > Custom CSS

/* tablet homepage */
@media screen and (max-width:991px) and (min-width:768px) {
/* Office buildings */
div#block-324d48fea82cb1482a39 h2 {
    font-size: 30px;
}
/* Manufacturing */
div#block-7677f70433b805f62a7e h2 {
    font-size: 30px;
    white-space: nowrap;
}
/* Cultural */
div#block-53ddc49de80d64e75e3d h2 {
    font-size: 30px;
}
/* footer */
div#page-section-605cb7c6b307fd1708cb8f9e {
 .span-3 {
    width: 40%;
}
.span-4:nth-child(2) {
    width: 5%;
}
.span-1 {
    width: 20%;
}
.span-4:last-child {
    width: 35% !important;
}
}
/* overlay menu line spacing */
div.container a {
    line-height: 1.2em;
}
}
/* mobile */
@media screen and (max-width:767px) {
/* rockport video */
div#page-section-60c236e1026cde584fcf56e1>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

@tuanphan Thank you very much! I don't have a tablet to review them on but the code is in there!

I started another thread regarding adding videos to my project photo galleries if you'd have a look. I purchased a plugin I saw you suggest in another thread but, there is a certain clunkiness to how it works.