Jump to content

Caption | changing font size, color, placement, frame

Recommended Posts

Site URL: https://www.konsulentoppdrag.no

Select 'presentasjon' + enter PW = konsulent2022

Using this code:

p.gallery-caption-content {
    font-size: 20px !important;
      font-weight: bolder;
    color: #F2BA40;
      padding-top: 100px !important;
}

1. Font weight does not seem to be working ie. bold or bolder
2. First square 'Analyse & Markedsundersøkelser' - how to I narrow the gap between lines (used shift+enter for caption text)
3. On hover gold frame around picture?

Edited by JakeLake
new info
Link to comment
  • JakeLake changed the title to Caption | changing font size, color, placement, frame
22 hours ago, JakeLake said:

Site URL: https://www.konsulentoppdrag.no

Select 'presentasjon' + enter PW = konsulent2022

Using this code:

p.gallery-caption-content {
    font-size: 20px !important;
      font-weight: bolder;
    color: #F2BA40;
      padding-top: 100px !important;
}

1. Font weight does not seem to be working ie. bold or bolder
2. First square 'Analyse & Markedsundersøkelser' - how to I narrow the gap between lines (used shift+enter for caption text)
3. On hover gold frame around picture?

Use this new code

p.gallery-caption-content {
    font-size: 20px !important;
    color: gold;
    padding-top: 200px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
}
figure:hover {
    border: 3px solid gold;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 4/7/2022 at 3:06 PM, JakeLake said:

Working GREAT: How do we make it fit on mobile devices?

Mobile looks fine. Can you explain this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Remove previous CSS code and try with these CSS code

[data-section-id="61e99335f5b8f86607fd6963"] {
  .gallery-grid-item {
    overflow: hidden;
    img{
      -webkit-filter: grayscale(1);
      transition: 0.2s;
    }
    position: relative;
    .gallery-caption{
      opacity: 0 !important;
      transition-delay: 0ms !important;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 0 !important;
      .gallery-caption-wrapper{
        display: flex;
        justify-content: center;
    	align-items: flex-end;
        padding-bottom: 10vh;
        box-sizing: border-box;
        border: 3px solid gold;
        p.gallery-caption-content{
          font-size: 23px !important;
          color: gold;
          font-weight: 900 !important;
          line-height: 20px !important;
        }
        @media(max-width: 767px){
          padding-bottom: 15px !important;
          p{
            font-size: 20px !important;
          }
        }
      }
    }
  }
  .gallery-grid-item:hover {
    overflow: hidden;
    img{
      -webkit-filter: grayscale(0) !important;
      transform: scale(1.01);
    };
    .gallery-caption{
      opacity: 1 !important;
    }
  }
}

 

Edited by Web_Solutions
Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • 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.