Jump to content

How to line things up

Go to solution Solved by Ziggy,

Recommended Posts

Hi,

I am trying to get text to line up with a video on a page. I cant work out how to push the title (Kin Spirits) to be level with the video on the left (screenshot attached). The setting for the text already has it pushed to the top (as attached).

Any advice or guidance greatly appreciated.

Bill

Screenshot 2022-10-11 at 10.12.40.png

Screenshot 2022-10-11 at 10.16.43.png

Link to comment

Can you share your website URL and site wide password?

Are you asking about having the top of the text aligned exactly with the top of the video? If so this is adjusted with the line height, but it's a property that you have to be careful with as it will start to cause the text to overlap when wrapping onto the next line if changed globally on the website.

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) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
48 minutes ago, Ziggy said:

Can you share your website URL and site wide password?

Are you asking about having the top of the text aligned exactly with the top of the video? If so this is adjusted with the line height, but it's a property that you have to be careful with as it will start to cause the text to overlap when wrapping onto the next line if changed globally on the website.

Hi Ziggy, thanks for responding.

Yes, I just want the title text (The Beast Next Door) aligned with the top of the video, as it is it just looks sloppy to me. So it sounds like I should play with line height. My site is very simple - home, about, contact, and all the film pages will have the same layout, so its not a big deal if I mess up in the process (and I try things on a duplicate website first).

My page is billhutchensfilms.com. I am redesigning the pages so I have made new The Beast Next Door page live on the menu so you can see it.

Bill

Link to comment
  • Solution

If you add this to the page settings header code injection for that page, and then when you add a new film page, duplicate it (or simply add this code to any new film page)

<style>
 @media only screen and (min-width:750px) {
    h3:nth-child(1) {
      line-height: 1.5rem;
    }
 }
</style>

This targets the first H3 text on the page and reduces the line height enough (in my testing) to make it level with the video.

Hope that's a good enough solution for you.

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) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Ziggy said:

If you add this to the page settings header code injection for that page, and then when you add a new film page, duplicate it (or simply add this code to any new film page)

<style>
 @media only screen and (min-width:750px) {
    h3:nth-child(1) {
      line-height: 1.5rem;
    }
 }
</style>

This targets the first H3 text on the page and reduces the line height enough (in my testing) to make it level with the video.

Hope that's a good enough solution for you.

Thanks, I will give it a crack

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.