Eliminating bottom of a cover photo in mobile

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

I have a client who would like me to remove the part of the picture below the quote block in mobile view.  You can see the image below and the section under the button they would like removed.  Would anyone have any code suggestions for me to accomplish this? I am lost!  Thank You

URL: https://dianamorgan.squarespace.com/

site PW: DianaDomination

Hi. It looks fine here. Do you still need help?

Thank you for your response, Tuan.

I am trying to figure out how to reduce and/or eliminate the white space below the button and center the button (only in mobile).  I was able to get the picture to disappear by using a bunch of padding codes but I think it may be a clunky way to do it? 

This is what I used as a workaround:

 @media only screen and (max-width: 640px) {#collection-606bf0ed9d0cb2178513ff31 .section-background {padding-bottom:150px;}}
@media only screen and (max-width: 640px) {#block-yui_3_17_2_1_1618208799104_17251{margin-bottom: -40px}}

21 hours ago, MRichards said:

Thank you for your response, Tuan.

I am trying to figure out how to reduce and/or eliminate the white space below the button and center the button (only in mobile).  I was able to get the picture to disappear by using a bunch of padding codes but I think it may be a clunky way to do it? 

 

This is what I used as a workaround:

 @media only screen and (max-width: 640px) {#collection-606bf0ed9d0cb2178513ff31 .section-background {padding-bottom:150px;}}
@media only screen and (max-width: 640px) {#block-yui_3_17_2_1_1618208799104_17251{margin-bottom: -40px}}

Add to Design > Custom CSS

/* Home top banner spacing */
@media screen and (max-width:767px) {
body.homepage article section:first-child .content-wrapper {
    padding-bottom: 0 !important;
}
#block-yui_3_17_2_1_1618208799104_17251 {
    margin-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1618208799104_19229 {
    position: absolute;
    bottom: -40px;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
}

That worked, Thank You!!!

Also, some small problems.

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

1. (Tablet-Homepage) Increase box width?

2. (Mobile-About) Want to remove “about” on mobile only?

Yes on both, especially the box width on tablet

22 hours ago, MRichards said:

Yes on both, especially the box width on tablet

Add to Design > Custom CSS

/* tablet home box width */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-6073e82c7d0e081e9c8ddc32 .span-4 {
    width: 60%;
}
}
/* Mobile remove about title */
@media screen and (max-width:767px) {
div#block-607c77307674d17b24f05582 {
    visibility: hidden;
}
}

On 4/29/2021 at 6:14 AM, tuanphan said:

Add to Design > Custom CSS

/* Home top banner spacing */
@media screen and (max-width:767px) {
body.homepage article section:first-child .content-wrapper {
    padding-bottom: 0 !important;
}
#block-yui_3_17_2_1_1618208799104_17251 {
    margin-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1618208799104_19229 {
    position: absolute;
    bottom: -40px;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
}

Thank you, Tuan!

 

On 5/3/2021 at 6:41 AM, MRichards said:

 

You're welcome. If you found any other problems, just comment here. We will help.