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

Mobile Customization of Banner

Question

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.

Screen Shot 2019-10-25 at 10.50.01 PM.png

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1

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


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0
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?

IMG_5E4582DEBF07-1.jpeg

Edited by OneKindKevin

Share this post


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

IMG_0016.PNG

Share this post


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


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...