Jump to content

Eliminating bottom of a cover photo in mobile

Go to solution Solved by tuanphan,

Recommended Posts

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

IMG_6142.thumb.PNG.bd4084b6aea1df1a294d3ed22f11d559.PNG

Link to comment

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

Link to comment
  • Solution
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%;
}
}

 

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
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;
}
}

 

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

 

 

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.