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 8
  • 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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/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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 8/20/2023 at 9:27 AM, amckaywrites said:

Hi! I'm looking to do the same thing, just reversed (fixed image on right, scrolling text on left).

Would like this to be repeatable across many pages.

How do I go about this? Thanks for your help!!

 

 

Can you share link to a page? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank 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.