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

Mobile Customization of Banner


OneKindKevin

Question

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)

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

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

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