Turn off author and author profile on one blog page but not the other

Site URL: https://chiroup.com/podcast

Hi there, I am wanting to turn off showing the author and author profile on my podcast page. However, I have a blog page where I do want the author and author profile to show. When I turn off the toggles, it turns it off for both the podcast and blog page. Is there a way to turn it off just for the podcast page? 

PW: 1017

Add to Podcast Page Header (hover Podcast Page on Pages > Main Navigation or Not Linked > Click Gear icon > Advanced)

<style>
  div.blog-item-author-profile-wrapper {
    display: none !important;
}
</style>

7 hours ago, tuanphan said:

Add to Podcast Page Header (hover Podcast Page on Pages > Main Navigation or Not Linked > Click Gear icon > Advanced)

<style>
  div.blog-item-author-profile-wrapper {
    display: none !important;
}
</style>

 

This worked for the author profile but can I also remove the "Written by" at the top of the page as well and on the podcast home page without removing it from my other blog page. I'd also like the image to be square in 3 in a row on the page but not change the other blog page. Not sure why Squarespace does this since they are 2 separate pages. 

Add this code under

<style>
span.blog-author {
    display: none !important;
}
span.blog-meta-delimiter {
    display: none;
}
.blog-meta-item.blog-meta-item--author.p-author.author {
    display: none;
}
  time:after {
    visibility: hidden;
}
</style>

On 8/28/2022 at 2:41 AM, tuanphan said:

Add this code under

<style>
span.blog-author {
    display: none !important;
}
span.blog-meta-delimiter {
    display: none;
}
.blog-meta-item.blog-meta-item--author.p-author.author {
    display: none;
}
  time:after {
    visibility: hidden;
}
</style>

 

This is great! Any way you know how to change the size of the image without changing the size of the images on the other blog page we have? I want them to display in 3 columns and as squares not the other settings I have for my other blog page. 

18 hours ago, ChiroUp said:

This is great! Any way you know how to change the size of the image without changing the size of the images on the other blog page we have? I want them to display in 3 columns and as squares not the other settings I have for my other blog page. 

You mean reduce width & height? Try this code

<style>
  .tweak-blog-basic-grid-image-aspect-ratio-32-standard .blog-basic-grid .image-wrapper {
    padding-bottom: 40% !important;
}

.blog-basic-grid .blog-basic-grid--container.is-loaded>div:first-child {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
</style>

5 hours ago, tuanphan said:

You mean reduce width & height? Try this code

<style>
  .tweak-blog-basic-grid-image-aspect-ratio-32-standard .blog-basic-grid .image-wrapper {
    padding-bottom: 40% !important;
}

.blog-basic-grid .blog-basic-grid--container.is-loaded>div:first-child {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
</style>

 

Hm, no. So on my blog page: https://chiroup.com/blog we have the blogs displayed into 2 columns and the images are a 3:2 ratio. Now, on my podcast page: https://chiroup.com/podcast I want them to display in 3 columns and the image be a 1:1 ratio. (square) When I go to change it on the podcast page in the "edit section" settings, it changes the set up of the blog page too. I only want this to affect the podcast page, not the blog page.

7 hours ago, ChiroUp said:

Hm, no. So on my blog page: https://chiroup.com/blog we have the blogs displayed into 2 columns and the images are a 3:2 ratio. Now, on my podcast page: https://chiroup.com/podcast I want them to display in 3 columns and the image be a 1:1 ratio. (square) When I go to change it on the podcast page in the "edit section" settings, it changes the set up of the blog page too. I only want this to affect the podcast page, not the blog page.

Add to Podcast Page Header

<style>
  @media screen and (min-width:992px) {
  .tweak-blog-basic-grid-width-inset .blog-basic-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
.tweak-blog-basic-grid-image-aspect-ratio-32-standard .blog-basic-grid .image-wrapper {
    padding-bottom: 100% !important;
}
  }
</style>

On 9/20/2022 at 6:53 PM, tuanphan said:

Add to Podcast Page Header

<style>
  @media screen and (min-width:992px) {
  .tweak-blog-basic-grid-width-inset .blog-basic-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
.tweak-blog-basic-grid-image-aspect-ratio-32-standard .blog-basic-grid .image-wrapper {
    padding-bottom: 100% !important;
}
  }
</style>

 

This worked!! However not on mobile. Is there a way to make the code work on mobile so the pictures are squares on mobile as well?

On 9/23/2022 at 12:53 AM, ChiroUp said:

This worked!! However not on mobile. Is there a way to make the code work on mobile so the pictures are squares on mobile as well?

Try this new code

<style>
  @media screen and (min-width:992px) {
  .tweak-blog-basic-grid-width-inset .blog-basic-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
  }
  .tweak-blog-basic-grid-image-aspect-ratio-32-standard .blog-basic-grid .image-wrapper {
    padding-bottom: 100% !important;
}
</style>