Jump to content

Caption overlay running outside thumbnail on mobile.

Recommended Posts

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
  • Replies 6
  • Views 557
  • Created
  • Last Reply
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

@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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.