Styling gallery Descriptions

Site URL: https://www.cannibalcyclops.com/gallery-test

Hi Everyone,

I'm looking for a way to add paragraph styles to the descriptions in a gallery section. I've been able to style it a bit directly in the description for each image. But while it is displaying the <h> tags I used, it's ignoring the <p> tags. 

Here's what I'm using in one of the descriptions: 

<h4>So You’re Dead</h4>
<p>Really? Killed during a supermarket robbery? You’re pretty mad at the senseless way you went out — until you realize, this might be the opportunity of a lifetime.</p>
<p class="sqsrte-small">Posted 05/05/20 ◦ 1,500 words</p>

This is the test page:

https://www.cannibalcyclops.com/gallery-test

I'm essentially trying to reproduce what I have on the homepage, but with a gallery rather than image blocks.

Thanks, Steve

The reason it's not working is because the styles for the .sqsrte-small CSS selector is being overridden by the .gallery-section .gallery-caption p selector, see screenshot. To fix, add this CSS:

@media screen and (min-width: 1385.64px) {
  .gallery-section .gallery-caption .sqsrte-small {
    font-size: .9rem;
  }
}

Thanks jpeter! I'll make those changes and report back.

8 hours ago, jpeter said:

The reason it's not working is because the styles for the .sqsrte-small CSS selector is being overridden by the .gallery-section .gallery-caption p selector, see screenshot. To fix, add this CSS:

@media screen and (min-width: 1385.64px) {
  .gallery-section .gallery-caption .sqsrte-small {
    font-size: .9rem;
  }
}

 

1 hour ago, SMorris said:

Thanks, just made the changes and it worked great! One other question, the override works when the screen is full size, but when the browser window is pulled in, or when you click to view as mobile, the paragraph styled fonts all revert back to the default and reduced in scale. Is there some css to stop that from happening or control it? Thanks again.

 

•  

Oh yeah if you want that font size to be small no matter the width of your browser, you'll just remove the media query, @media screen and (min-width: 1385.64px), that wraps the CSS. So your CSS would now be:
 

.gallery-section .gallery-caption .sqsrte-small {
	font-size: .9rem;
}

1 hour ago, jpeter said:

Oh yeah if you want that font size to be small no matter the width of your browser, you'll just remove the media query, @media screen and (min-width: 1385.64px), that wraps the CSS. So your CSS would now be:
 

.gallery-section .gallery-caption .sqsrte-small {
	font-size: .9rem;
}

 

Ah excellent, that did the trick. Thanks again !