Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Eliminating bottom of a cover photo in mobile


MRichards

Question

9 answers to this question

Recommended Posts

  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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
  • 0

Also, some small problems.

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

1. (Tablet-Homepage) Increase box width?

dianamorgan.squarespace.com-01.png

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

dianamorgan.squarespace.com-02.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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...