pelanderson

5 hours ago, Beyondspace said:

It looks great on my end with different size of browser

 

 

 

Can you share at which breakpoint you get this 

Hi, issue seems to be when viewing categories when screen smaller and 3 posts on a row

5 minutes ago, Beyondspace said:

It looks fine now. Have you figured it out?

No , still happening if you resize screen smaller.

Hi, I am using the following code to centre and space the blog list (main page and category posts but it is affecting spacing between rows. Is there better code to use that doesn't create this problem? Thanks

https://renfield-centre.squarespace.com/  PW renfield

.BlogList.BlogList--posts-excerpt.sqs-blog-list.clear {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tweak-blog-list-style-grid .BlogList-item {
margin-left: 35px;
}

3 hours ago, tuanphan said:

Because header is sticky to top on scroll. You can consider disable sticky header on this page.

If you need, we can give the code

Thanks, if you can give code that would be great

On 2/21/2023 at 7:39 PM, ReformDesign said:

Add

.tweak-blog-list-style-grid .BlogList-item {
margin-left: 35px;
}

There was a right margin applied already. 

On 2/21/2023 at 7:39 PM, ReformDesign said:

Add

.tweak-blog-list-style-grid .BlogList-item {
margin-left: 35px;
}

There was a right margin applied already. 

Hi @ReformDesign, adding the code centres but spacing not even when resizing screen? 

8 hours ago, tuanphan said:

Try new code

<style>
  a.next-section {
    bottom: 50px !important;
    margin-left: -40px;
}
</style>

 

Brilliant, thanks so much @tuanphan On click it goes down just a little too far. Is it possible to adjust? Thanks, Pete 

On 2/26/2023 at 2:26 AM, tuanphan said:

You want to center this item?

Hi, yes, aiming to properly center the posts on the category page

On 2/25/2023 at 1:05 PM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $("header.BlogList-filter").html(function() { 
          return $(this).html().replace("Posts in", "new text");  
    });
});
</script>

Perfect, many thanks

On 2/25/2023 at 1:26 PM, tuanphan said:

Add this code under

<style>
  a.next-section {
    bottom: 50px !important;
}
</style>

 

Hi, added that under but no change

1 hour ago, ReformDesign said:

Add

.tweak-blog-list-style-grid .BlogList-item {
margin-left: 35px;
}

There was a right margin applied already. 

Thanks looks good except where the main page showing all posts and on mobile is too far to the right.

7 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
	section#intro-gallery a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      color: #fff;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
        animation: fade_move_down 4s ease-in-out infinite;
    }
section#intro-gallery a.next-section:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 50px;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>
<script>
	$(function() {
      $("section#intro-gallery").append('<a href="#" class="next-section"></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("section#intro-gallery").next().offset().top}, 500, 'linear');
      });
    });
</script>

 

Brilliant, thanks @tuanphan Can you advise how I can adjust the arrow so it's centred and above the gallery dots? 

4 hours ago, tuanphan said:

Can you check it again? I don't see the text Posts in

It's showing now 

2 hours ago, pelanderson said:

Yes please, just added hide code for now

I've removed the code to hide  the BlogList-filter

1 hour ago, tuanphan said:

Hi,

I see 2 posts only, no way to check this. If you can add 4 posts, I can check easier

renfield

https://renfield-centre.squarespace.com/rooms/category/200

Hi, I managed to add code to centre posts but even on the category with 2 posts can see they are slightly to the left. This category has 4 posts: https://renfield-centre.squarespace.com/rooms/category/50 

This summary block containing 11 posts centred are also slightly to the left https://renfield-centre.squarespace.com/all

14 minutes ago, tuanphan said:

It looks like you removed Posted in Text? Do you still need help?

Yes please, just added hide code for now

42 minutes ago, ReformDesign said:

.BlogList.BlogList--posts-excerpt.sqs-blog-list.clear {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

 

Thanks, doesn't appear to be exactly centred. I noticed this with flex code on a summary block too.

13 minutes ago, ReformDesign said:

I don't know how to make it say the correct category name, but maybe you could just hide it. 

.BlogList-filter {
display: none;
}

 

Perfect thank you.

Do you know how I can centre the posts on the /rooms page?

Hi, how do I centre blog list content and category pages and change the text, font and size of 'Posts in X' to eg 'Rooms with a capacity of X' https://renfield-centre.squarespace.com/rooms/category/200
PW: renfield

Thanks
Pete

On 3/10/2021 at 1:24 AM, Beyondspace said:

try

.blog-item:last-child:nth-child(4n - 1) {
  grid-column-end: 0;
}

.blog-item:nth-last-child(2):nth-child(4n + 1) {
  grid-column-end: 3;
}

Hi there @Beyondspace

I tried the above on my site with no success. Could you take a look? Many thanks, Pete

https://renfield-centre.squarespace.com/rooms

PW renfield

Hi @ReformDesign, just spotted that as the color is applied to all .intro sections it is affecting the intro on my Events page. Is it possible to exclude the color on this page? https://renfield-centre.squarespace.com/events  Thanks, Pete

Perfect! Many thanks. May I ask you another question? 

On each category page is it possible to change the text of 'Posts in X' to eg 'Rooms with a capacity of X' and also adjusting the font size?

https://renfield-centre.squarespace.com/rooms/category/200

Hi, 

I have added this code to change the background colour of blog posts to light grey which works except for blog category pages where the intro section remains white. Business plan. Can you help? Thanks, Peter

.collection-type-blog .Main {
  background-color: #E7E7E7;
   }

https://renfield-centre.squarespace.com/rooms
PW renfield

6 hours ago, tuanphan said:

Add to Design > Custom CSS

section.Intro {
    overflow: visible;
}
ul.archive-group-list {
    position: absolute;
    top: 60px;
    background-color: #faf9f7;
    z-index: 9999;
    left: 50%;
    transform: translateX(-50%);
}

 

Brilliant, thanks so much. May I ask another question?  How do I centre blog posts? eg if there are rows of 4 posts then the last row has just 3 posts? Or if there is just one post?