Mobile Customization of Banner

I have attached an image that shows what I would like the first section of my website to look like on mobile. My site is onekindcreative.squarespace.com

1. I would like to change the background image on mobile to a gradient image.

2. I would like to bump the banner content down on mobile.

Hi @OneKindKevin. If the gradient is what you're concerned with primarily (as opposed to wanting to use an entirely different photograph on mobile) it looks to me like something that can be accomplished via CSS.

Something like this, inserted via Custom CSS:

@media screen and (max-width:640px) {
  .Index-page-content {
    justify-content: end !important;
    padding-bottom: 8% !important;
  }
  #banner {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 35%, rgba(233,210,192,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%);
  }
}

Do let me know how that works for you.

-Brandon

13 hours ago, brandon said:

Hi @OneKindKevin. If the gradient is what you're concerned with primarily (as opposed to wanting to use an entirely different photograph on mobile) it looks to me like something that can be accomplished via CSS.

Something like this, inserted via Custom CSS:

@media screen and (max-width:640px) {
  .Index-page-content {
    justify-content: end !important;
    padding-bottom: 8% !important;
  }
  #banner {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 35%, rgba(233,210,192,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%);
  }
}

Do let me know how that works for you.

-Brandon

Thank you Brandon! Part of the code is working, part isn't. The gradient worked but .Index-page-content has pushed all the text up. Thoughts on why?

Quote

@media screen and (max-width:640px) {
   .Index-page-content {
    justify-content: bottom !important;
    padding-bottom: 1% !important;
  }
  #banner {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 15%, rgba(233,210,192,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 15%,rgba(233,210,192,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 15%,rgba(233,210,192,1) 100%);
  }
}

Thank you again Brandon! Resolved content positioning issue with the code above.  

Now I would like the gradient color rgba(233,210,192) to be at full opacity before the bottom of the banner. Somewhere right above the get started button (per the first image). I would also love to get rid of hyphens. I have attached a screenshot of the way the site currently looks on mobile. 

9 hours ago, OneKindKevin said:

.Index-page-content has pushed all the text up. Thoughts on why?

Yes, this was due to using "end" instead of "flex-end" in my original answer. I have updated the code.

9 hours ago, OneKindKevin said:

Now I would like the gradient color rgba(233,210,192) to be at full opacity before the bottom of the banner.

That is simply a matter of changing the "100%" to, say, "90%" in the code. By setting it to 90%, you're essentially saying that you want it to be the color (233, 210, 192, 1)  (the "1" stands for 100% opacity) at 10% before the bottom.

Thanks Brandon! How do I get rid of hyphens?