Caption | changing font size, color, placement, frame

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?

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;
}

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

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?

Hi! Text drops behind pictures...apart from bottom where it drops down over footer.

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;
    }
  }
}

EXCELLENT - however, mobile text overflows images....also would like to move the text lower?

www.konsulentoppdrag.no >> Presentasjon + new PW = FlereKonsulenter2025

Here you can reduce the font size for mobile

If it works, you can mark it. To help others.

*.PNG not showing?