Jump to content

Styling gallery Descriptions

Recommended Posts

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

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

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

 

gallery_test_—_Cannibal_Cyclops____An_Illustrated_Horror_Series_of_Short_Stories.png

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
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;
  }
}

 

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.

 
Link to comment
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;
}

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
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 !

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.