camfont Posted June 6, 2022 Share Posted June 6, 2022 (edited) Site URL: https://jeremymillerfsa.com Hello– This is for : https://www.jeremymillerfsa.com Password: k5ut$YXZ53ZR!42 I don't know if this is even possible, but I'd like the text shown in this screencap to always be left aligned with the logo above. Thank you! Edited June 7, 2022 by camfont Link to comment
DV2 Posted June 7, 2022 Share Posted June 7, 2022 Hi Cam, The /press page doesn't look like your screen capture. Did you want to do this on the home page? Link to comment
camfont Posted June 7, 2022 Author Share Posted June 7, 2022 You're absolutely correct, I copy/pasted the url and password from another question and missed the link was for the press page. I did indeed mean the home page, thanks! Link to comment
creedon Posted June 7, 2022 Share Posted June 7, 2022 Remove, make a copy somewhere, any previous attempts at manipulating that text block. @media only screen and ( pointer : coarse) and ( mmin-width : 1025px ), screen and ( min-width : 800px ) { #block-6a5984dad3cbc96af63c { left : 0; padding-left : 4vw; position : fixed; } } This is for v7.1 and specific to the posters need. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
camfont Posted June 8, 2022 Author Share Posted June 8, 2022 (edited) Super! Now I'm trying to figure out how to keep that block a bit higher up on the page, somewhere closer to halfway down the image. Thanks! EDIT: I experimented a bit and adding these two lines seems to work, not sure if there's a cleaner way... top: 0; padding-top: 9%; EDIT 2: It seems to have applied to mobile too even though it seems the screen width is specified in your code... would prefer it doesn't apply to mobile -- thank you! EDIT 3: Whooops I just noticed the text is now scrolling down the page and overlaying over other images... see attached screenshot Edited June 8, 2022 by camfont Link to comment
DV2 Posted June 8, 2022 Share Posted June 8, 2022 @creedon 's solution is certainly valid, but personally, I'd go a different route. Trying to position via fixed or absolute is problematic because fixed is always on screen and sqsp uses a lot of relative elements which make it hard to use absolute. It's better to adjust the parent element to the header's specs. (Speaking of which, this whole alignment thing isn't a problem if you set the header to not go wider than the rest of the page. ) Here's what I'd do: div#page-section-623a002cd58eb62b7dfa1775 { min-width: 92vw!important; margin-left: calc(~"50% - 46vw"); } As long as your headlines are left justified, it should work and you won't have it popup elsewhere on the page. Link to comment
creedon Posted June 9, 2022 Share Posted June 9, 2022 I think you can achieve a similar effect without CSS! Set up the page section with the following settings. Have two blocks on the page. Demo. founders desk effect without CSS.mp4 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
camfont Posted June 9, 2022 Author Share Posted June 9, 2022 @DV2 That seems to work! I did have to add negative margin b/c it was too far down @creedon I tried your solution but there's too much margin on the left, it doesn't align like in your examples... Thanks all – until I break it again!!! Link to comment
camfont Posted June 9, 2022 Author Share Posted June 9, 2022 Well @DV2 here I am again 🙂 So it looks ok on my mac but on Windows machines it looks like the screenshot: Link to comment
DV2 Posted June 9, 2022 Share Posted June 9, 2022 Well, yeah. When you throw around things like a -75% top margin, weird things are going to happen. Get rid of that line and use the squarespace controls to center or top align the block. 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