BillHFilms Posted October 11, 2022 Share Posted October 11, 2022 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 Link to comment
Ziggy Posted October 11, 2022 Share Posted October 11, 2022 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
BillHFilms Posted October 11, 2022 Author Share Posted October 11, 2022 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 Ziggy Posted October 11, 2022 Solution Share Posted October 11, 2022 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. tuanphan 1 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
BillHFilms Posted October 11, 2022 Author Share Posted October 11, 2022 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 Ziggy 1 Link to comment
BillHFilms Posted October 11, 2022 Author Share Posted October 11, 2022 10 minutes ago, BillHFilms said: Thanks, I will give it a crack That did it. Thank you for your assistance. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment