jasonM 1 Share Posted February 25 (edited) Site URL: http://www.millscreative.com Hello! I've been trying to achieve something for a few hours, but I have had no success. So it is time to ask for help. ☝️ My goal is to make a similar layout to this example: https://www.drift.com/dc/ These features, in particular, stand out: The image is aligned and sticks to section bottom There's 0 padding between section bottom and the image The image is responsive (drops below text in mobile devices) How might I achieve this with features available in 7.1? Thanks! Edited February 25 by jasonM simplify Link to post
0 tuanphan 9,600 Solution Share Posted March 7 On 3/4/2021 at 6:59 PM, jasonM said: Yes, it is the picture of me that I would like to stick to the bottom of that section. Add to Design > Custom CSS /* image to bottom */ @media screen and (min-width:768px) { [data-section-id="60280e1ac467c7682a023318"] .content-wrapper { padding-bottom: 0 !important; } div#page-section-60280e1ac467c7682a023318>.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_1614258722517_6384 { padding-bottom: 0; } } jasonM 1 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 tuanphan 9,600 Share Posted March 1 Hi. You can use Image Block, then let me know. We will give the code to achieve above. jasonM 1 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 jasonM 1 Author Share Posted March 1 I have the image in an image block now, just need to get that block to stick to the bottom of the section. 🙂 Thank you so much for taking a look at this!!! Link to post
0 tuanphan 9,600 Share Posted March 3 On 3/1/2021 at 9:58 PM, jasonM said: I have the image in an image block now, just need to get that block to stick to the bottom of the section. 🙂 Thank you so much for taking a look at this!!! Hi. Where is image? You mean image in this section: HELLO, I AM JASON MILLS,? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 jasonM 1 Author Share Posted March 4 23 hours ago, tuanphan said: Hi. Where is image? You mean image in this section: HELLO, I AM JASON MILLS,? Yes, it is the picture of me that I would like to stick to the bottom of that section. Link to post
0 jasonM 1 Author Share Posted March 7 (edited) 2 hours ago, tuanphan said: Add to Design > Custom CSS /* image to bottom */ @media screen and (min-width:768px) { [data-section-id="60280e1ac467c7682a023318"] .content-wrapper { padding-bottom: 0 !important; } div#page-section-60280e1ac467c7682a023318>.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_1614258722517_6384 { padding-bottom: 0; } } THANK YOU THANK YOU THANK for this. Works perfect on browser, but does not stick to the bottom on mobile. I don't have a problem with that so much. Let me know how I can repay you! Edited March 7 by jasonM Link to post
0 tuanphan 9,600 Share Posted March 15 On 3/7/2021 at 3:43 PM, jasonM said: THANK YOU THANK YOU THANK for this. Works perfect on browser, but does not stick to the bottom on mobile. I don't have a problem with that so much. Let me know how I can repay you! Above code run on desktop only. With mobile, add this code (don't remove current code) /* Image stick to bottom - mobile */ @media screen and (max-width:767px) { [data-section-id="60280e1ac467c7682a023318"] .content-wrapper { padding-bottom: 0 !important; } div#block-yui_3_17_2_1_1614258722517_6384 { padding-bottom: 0 !important; } } Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 ASmart24 0 Share Posted April 9 Hi, I'm trying to do exactly the same but it is not working for me using the codes above - I may have page or content section so I would love some help please! Link to post
0 tuanphan 9,600 Share Posted April 14 On 4/9/2021 at 5:28 PM, ASmart24 said: Hi, I'm trying to do exactly the same but it is not working for me using the codes above - I may have page or content section so I would love some help please! Hi. Can you share link to page where you have problem? We can help easier Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
jasonM 1
Site URL: http://www.millscreative.com
Hello! I've been trying to achieve something for a few hours, but I have had no success. So it is time to ask for help. ☝️
My goal is to make a similar layout to this example: https://www.drift.com/dc/
These features, in particular, stand out:
How might I achieve this with features available in 7.1?
Thanks!
Edited by jasonMsimplify
Link to post
Top Posters For This Question
5
4
1
Popular Days
Mar 7
2
Mar 1
2
Feb 25
1
Mar 15
1
Top Posters For This Question
tuanphan 5 posts
jasonM 4 posts
ASmart24 1 post
Popular Days
Mar 7 2021
2 posts
Mar 1 2021
2 posts
Feb 25 2021
1 post
Mar 15 2021
1 post
Popular Posts
tuanphan
Hi. You can use Image Block, then let me know. We will give the code to achieve above.
tuanphan
Add to Design > Custom CSS /* image to bottom */ @media screen and (min-width:768px) { [data-section-id="60280e1ac467c7682a023318"] .content-wrapper { padding-bottom: 0 !important; } div#pa
Posted Images
9 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment