Jump to content

Mobile Customization of Banner

Recommended Posts

  • Replies 5
  • Views 981
  • Created
  • Last Reply

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

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

Archived

This topic is now archived and is closed to further replies.

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