Jump to content

No padding + fixed image on left with scrolling text on right

Go to solution Solved by Miguelez,

Recommended Posts

Site URL: https://www.miguelezcreative.com

Hello Community,

I'm finishing my creative portfolio: https://www.miguelezcreative.com
Currently it's password protected. Pass is: saymyname

On the about section I'd like to show a photo of me on the left side and text on the right side. I'm looking to add CSS code to achieve two things:

- Full height image without top and left padding. Meaning: the image just as if it were the background of this section.

- Sticky position of the image (important, only for desktop navigation) with scrollable text on the right side.

Right now the about section has a placeholder photo of me with top padding (with header) and left padding (with the margin) and, as I haven't added CSS yet, it's not sticky.

Hopefully someone has had a similar issue and can give me a hand 🙂

Cheers!

 

 

 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

On 1/23/2022 at 10:22 PM, Miguelez said:

Site URL: https://www.miguelezcreative.com

Hello Community,

I'm finishing my creative portfolio: https://www.miguelezcreative.com
Currently it's password protected. Pass is: saymyname

On the about section I'd like to show a photo of me on the left side and text on the right side. I'm looking to add CSS code to achieve two things:

- Full height image without top and left padding. Meaning: the image just as if it were the background of this section.

- Sticky position of the image (important, only for desktop navigation) with scrollable text on the right side.

Right now the about section has a placeholder photo of me with top padding (with header) and left padding (with the margin) and, as I haven't added CSS yet, it's not sticky.

Hopefully someone has had a similar issue and can give me a hand 🙂

Cheers!

 

 

 

Do you still need help?

It looks fine at the moment

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
On 1/23/2022 at 4:22 PM, Miguelez said:

Site URL: https://www.miguelezcreative.com

Hello Community,

I'm finishing my creative portfolio: https://www.miguelezcreative.com
Currently it's password protected. Pass is: saymyname

On the about section I'd like to show a photo of me on the left side and text on the right side. I'm looking to add CSS code to achieve two things:

- Full height image without top and left padding. Meaning: the image just as if it were the background of this section.

- Sticky position of the image (important, only for desktop navigation) with scrollable text on the right side.

Right now the about section has a placeholder photo of me with top padding (with header) and left padding (with the margin) and, as I haven't added CSS yet, it's not sticky.

Hopefully someone has had a similar issue and can give me a hand 🙂

Cheers!

 

Thank you for asking, @bangank36! @tuanphan helped me a lot with the CSS code. And you provided a last bit to avoid the image scrolling. Until know I have not managed to have an absolute height for the image while also keeping the other attributes: sticky + no padding. Will export a new image with a different image ratio to see if that works. Kudos to both of you!

 

 

Link to comment
  • 1 year later...
On 5/3/2023 at 9:55 PM, Callum1234 said:

Sorry to revive a very old topic but what was the CSS used to achieve this? Trying to do the same thing!

If you share link to your site, we can check code for your case easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)
On 5/5/2023 at 8:39 AM, tuanphan said:

If you share link to your site, we can check code for your case easier

mandarin-pigeon-xwbk.squarespace.com password is 'smallhelp'. It would be the image for the about page!

Edited by Callum1234
Link to comment
On 5/10/2023 at 10:26 PM, Callum1234 said:

mandarin-pigeon-xwbk.squarespace.com password is 'smallhelp'. It would be the image for the about page!

Try adding to Design > Custom CSS

@media screen and (min-width:768px) {
.fe-block-yui_3_17_2_1_1683123134636_14242 .image-block {
    position: fixed;
    top: 134px;
    z-index: 99999;
    left: 0;
    width: 60%;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.