Jump to content

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

Recommended Posts

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:

 

Q Screen Shot 2022-03-01 at 2.23.26 PM.png

Result Screen Shot 2022-03-01 at 2.25.09 PM.png

Link to comment
  • Replies 4
  • Views 533
  • Created
  • Last Reply

Top Posters In This Topic

#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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

image.thumb.png.46000350e4fa57bb9f930273c7da87f5.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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>

image.thumb.png.46000350e4fa57bb9f930273c7da87f5.png

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.