Jump to content

Need to align image flush to bottom of section on all screen sizes

Recommended Posts

Site URL: https://nanopath.squarespace.com/

I need help with my hero image on the home page. The image of the cut out girl needs to be flush to the bottom of the section on all screen sizes. It is currently good on mobile and larger desktop screen sizes. But when I adjust my browser screen size she starts floating and is not flush to the bottom of the section. Any help would be appreciated!! Thank you!!

Site password is: Nanopath2021

This is the code I have that is working for most screen sizes. 

/* Image stick to bottom - mobile */
@media screen and (max-width:767px) {
[data-section-id="61b63bd53abfad17364190fe"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1639332788200_17301 {
    padding-bottom: 0 !important;
}

}

/* image to bottom */
@media screen and (min-width:768px) {
[data-section-id="61b63bd53abfad17364190fe"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#page-section-61b63bd53abfad17364190fe>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}
div#block-yui_3_17_2_1_1639332788200_17301 {
    padding-bottom: 0;
}
}

Link to comment
  • Replies 15
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

On 12/28/2021 at 4:17 AM, NicoleJuniper said:

Site URL: https://nanopath.squarespace.com/

I need help with my hero image on the home page. The image of the cut out girl needs to be flush to the bottom of the section on all screen sizes. It is currently good on mobile and larger desktop screen sizes. But when I adjust my browser screen size she starts floating and is not flush to the bottom of the section. Any help would be appreciated!! Thank you!!

Site password is: Nanopath2021

This is the code I have that is working for most screen sizes. 

/* Image stick to bottom - mobile */
@media screen and (max-width:767px) {
[data-section-id="61b63bd53abfad17364190fe"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1639332788200_17301 {
    padding-bottom: 0 !important;
}

}

/* image to bottom */
@media screen and (min-width:768px) {
[data-section-id="61b63bd53abfad17364190fe"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#page-section-61b63bd53abfad17364190fe>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}
div#block-yui_3_17_2_1_1639332788200_17301 {
    padding-bottom: 0;
}
}

Try

@media only screen and (min-width: 768px)  {
  section[data-section-id="61b63bd53abfad17364190fe"]  .content-wrapper {
    position: absolute;
    bottom: 0;
    box-sizing: border-box !important; 
  }
  #block-yui_3_17_2_1_1639332788200_18972 {
    padding-bottom: 0;
  }
  section[data-section-id="61b63bd53abfad17364190fe"] .content > .sqs-layout > .row > .span-12 > .row {
    display: flex;
  }

  section[data-section-id="61b63bd53abfad17364190fe"] .content > .sqs-layout > .row > .span-12 > .row > .span-5 {
    align-self: flex-end;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

My testing result

image.thumb.png.0fa7b85f17fcd90ec1d90cd0ce35f104.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
10 hours ago, NicoleJuniper said:

@bangank36 Do you have any suggestions on how to fix this? Thank you!

I've just updated some additional Css codes, try again and check if it works properly on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
  • 1 year later...

@NicoleJuniper @Beyondspace Hey, I am having the same problem. Would you be able to share the latest code please? The last edit wasn't share here. Thank you!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
22 hours ago, melody495 said:

Hey, I am having the same problem. Would you be able to share the latest code please? The last edit wasn't share here. Thank you!

If you share link to page where you have problem, we can help 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
  • 2 weeks later...
On 8/10/2023 at 4:14 AM, PixlePop said:

Hello. I am having the same issue with my homepage image. I would like the image to be directly on the bottom for both desktop and mobile without scrolling.  Thank you!

image.thumb.png.1120643c23662bcb52b4e769aad5b99e.png

What is your homepage url? 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
On 8/13/2023 at 11:46 PM, PixlePop said:

http://www.shalayaholliday.com/

Sorry! I thought I added that!

Try adding to Design > Custom CSS or Website > Website Tools > Custom CSS

/* Float image to bottom */
div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image {
    justify-content: flex-end !important;
}
div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image>div {
    position: absolute !important;
    bottom: -10px !important;
}

 

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 hours ago, tuanphan said:

Try adding to Design > Custom CSS or Website > Website Tools > Custom CSS

/* Float image to bottom */
div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image {
    justify-content: flex-end !important;
}
div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image>div {
    position: absolute !important;
    bottom: -10px !important;
}

 

Hi, I added please see attached. The image is still not flush to the bottom. There is still a gap. 

image.thumb.png.8e9b9d119f4366e5dbcbce13e0264da0.png

image.thumb.png.cf372d121e831619e820f5f186806baa.png

Link to comment

Use this new code. Then check in incognito window

/* Float image to bottom */
div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image {
    justify-content: flex-end !important;
}
div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image>div {
    position: absolute !important;
    bottom: -10px !important;
}
body.homepage article section:first-child {
	height: 100vh !important;
	min-height: unset !important;
}

 

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
  • 1 month later...
On 9/26/2023 at 10:35 PM, PixlePop said:

Good day,

The image still isn't anchored to the bottom. Please see attached.image.thumb.png.143ad118a1cbf5a98aefd8079a0b360a.png

image.thumb.png.fe8d04470168f2ee8e6f435b1752eeed.png

You need to add code to Custom CSS, not Code Injection

Scroll under Not Linked > You will see Website Tools > Click on it and choose Custom CSS

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.