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 2
  • 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, Keyword Highlighter
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

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.