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

Caption overlay running outside thumbnail on mobile.


Question

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>

 

Link to comment

6 answers to this question

Recommended Posts

  • 0

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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)

daffodil-denim-9jre.squarespace.com-01-m

2. (Tablet-Homepage)

daffodil-denim-9jre.squarespace.com-02-m

3. (Tablet-Homepage/Footer)

daffodil-denim-9jre.squarespace.com-03-m

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

daffodil-denim-9jre.squarespace.com-04-m

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

daffodil-denim-9jre.squarespace.com-05-m

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
3 hours ago, tuanphan said:

Want to fix these?

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

1. (Tablet-Homepage)

daffodil-denim-9jre.squarespace.com-01-m

2. (Tablet-Homepage)

daffodil-denim-9jre.squarespace.com-02-m

3. (Tablet-Homepage/Footer)

daffodil-denim-9jre.squarespace.com-03-m

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

daffodil-denim-9jre.squarespace.com-04-m

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

daffodil-denim-9jre.squarespace.com-05-m

 

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!

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...