Jump to content

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

Go to solution Solved by Miguelez,

Recommended Posts

Posted

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!

 

 

 

  • Replies 8
  • Views 2.7k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
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 (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

  • Solution
Posted
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!

 

 

  • 1 year later...
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
Posted
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!)

  • 3 months later...
Posted

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!!

 

 

Posted
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!)

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.