7.1 blog post title wrap, sticky text, and top pagination arrows

Site URL: https://www.jstevenson.ca/work/barbecue-country-catalogue-minimalist-theme

Hi there! I am working on some final finishing touches to my portfolio site before I make it live (I built the portfolio using SQSP 7.1 blog pages). Example page in question:

https://www.jstevenson.ca/work/barbecue-country-catalogue-minimalist-theme

Password: 2022

I realize not all of my questions may be easy to accomplish with css, so if someone tells me it's better not to try to accomplish some of my below questions I will be ok with leaving site as is...

*CSS Questions are for ALL blog posts + media screens min-width 768px:
1. How do I float the blog post title to the left so it wraps around the image column to right...

2. then align top the left column post title and image column to the right...

3. then make the left column post title and text column 'sticky' -- while the image column to right can scroll?

blog post pagination:
4. Is it possible to DUPLICATE the blog post pagination arrows and add them to the TOP of post (and still keeping pagination at bottom)?

Thanks in advance for any help,
Jen

Example screenshots attached:

#2. Try adding to Design > Custom CSS

/* sticky text */
@media screen and (min-width:901px) {
.blog-item-wrapper .blog-item-content .columns-12>.row>.span-12>.row>.span-3 {
    position: sticky;
    position: -webkit-sticky;
    top: 150px;
}
}

#4. Do you use Personal, Business or Commerce Plan?

8 hours ago, tuanphan said:

#2. Try adding to Design > Custom CSS

/* sticky text */
@media screen and (min-width:901px) {
.blog-item-wrapper .blog-item-content .columns-12>.row>.span-12>.row>.span-3 {
    position: sticky;
    position: -webkit-sticky;
    top: 150px;
}
}

#4. Do you use Personal, Business or Commerce Plan?

 

Thanks so much @tuanphan

Your answer to #2 worked! ...but you can understand why it would look better if I could also change #1 and #3.

Please let me know if you think #1 and #3 are too hard to accomplish and I will rethink how important it is to implement #2 (or maybe try to align blog post title right)

#4. is the thing I'd most like to do.  I am on *Business plan / can use site header/footer code injection.

On 3/4/2022 at 4:35 AM, JSteve said:

Thanks so much @tuanphan

Your answer to #2 worked! ...but you can understand why it would look better if I could also change #1 and #3.

Please let me know if you think #1 and #3 are too hard to accomplish and I will rethink how important it is to implement #2 (or maybe try to align blog post title right)

#4. is the thing I'd most like to do.  I am on *Business plan / can use site header/footer code injection.

Try adding to Work Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 $(document).ready(function() { 
		$('.blog-item-top-wrapper').insertBefore('.blog-item-wrapper .blog-item-content .columns-12>.row>.span-12>.row>.span-3>div:first-child');
	});
</script>
<style>
  .blog-item-top-wrapper {
    margin-bottom: 0px !important;
    padding-left: 17px;
}
</style>

I forgot to thank you. This worked! Much appreciated for all your help.

On 3/6/2022 at 12:24 AM, tuanphan said:

Try adding to Work Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 $(document).ready(function() { 
		$('.blog-item-top-wrapper').insertBefore('.blog-item-wrapper .blog-item-content .columns-12>.row>.span-12>.row>.span-3>div:first-child');
	});
</script>
<style>
  .blog-item-top-wrapper {
    margin-bottom: 0px !important;
    padding-left: 17px;
}
</style>