Jump to content

Make content title appear before the image

Recommended Posts

I was searching for a way for the content titles I give to images to appear before the image instead of after, I found this piece of code which worked and made the title appear as required,

.project-slide {
    display: flex;
    flex-direction: column-reverse;

but at the same time it made the image appear much smaller and the whole row occupied a middle third column instead of taking up the full width. How do I avoid this happening?

Thanks

Jason

Link to comment
  • Replies 13
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi Jason, can you share your website and this page/section?

34 minutes ago, ourownwars said:

.project-slide {
    display: flex;
    flex-direction: column-reverse;

This CSS is missing a closing bracket, but that might just be a copy/paste error here.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

The images appear full-width when I view that page, can you share some screenshots of before/after the code is applied?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

image.thumb.png.e00609fb643f7d2452b8835159568944.png

I'm not trying to say it looks how you want it, but the image is full-width.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

What template are you using? I don't recognize it, it looks like it's one of the old 7.0 templates.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes, York was part of the 7.0 template that were launched in 2014. That doesn't mean you shouldn't use them, they are still valid and supported for now. Version 7.1 has been out since 2020 and is a bit different in how you use it.

I would suggest trying it out and using a Portfolio page as your homepage as that's similar to the Project pages you are currently using, but gives you freedom to design the page and add text/images wherever you want without using code. I wouldn't worry about the template selection (these are no longer swappable templates as they all have the same functionality).

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

At this point in time, there is no direct upgrade tool, I suspect there will be, but it will have limitations

Have a read of this for the current state of affairs:

https://support.squarespace.com/hc/en-us/articles/360038270572-Moving-from-Squarespace-version-7-0-to-version-7-1-checklist

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, ourownwars said:

Is there anyway i can have my payment transferred to a new account just so I can have the new features? Obviosuly i dont want to pay for 2 accounts for the same thing at any point. Im not too fussed about mantaining old sites with old templates.

Not directly, no, but Squarespace Support have always been good at giving pro-rated refunds on old website plans when you're upgrading. Steps: Design your new website, buy a new plan, contact support and ask for a refund, cancel the old website plan.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.