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

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

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

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Here you can reduce the font size for mobile

Screenshot_165.png

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

Screenshot_158.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.