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

Custom CSS - Gradient Header for Media Screen - Sonny Template

Question

Hello,

I'm working in the Sonny template. I'm trying to problem solve on why the gradient header works in desktop view and tablet view, yet not the phone view. Along with adding a gradient header/footer, I've also fixed the navigation bar and adjusted the banner. Please see the CSS below. The only thing that isn't working is the header on the phone view. Even the Footer is showing the gradient in all views. Is there something I'm doing wrong?

.Header {background: rgb(253,177,57);background: linear-gradient(333deg, rgba(253,177,57,1) 0%, rgba(253,147,47,1) 14%, rgba(242,96,39,1) 100%);}

header { position: fixed !important; width: 100%; z-index: 99999; }

@media only screen and (min-width:640px) { main { padding-top: 82px; } }

.Footer {background: rgb(253,177,57);background: linear-gradient(333deg, rgba(253,177,57,1) 0%, rgba(253,147,47,1) 14%, rgba(242,96,39,1) 100%);}

Edited by ssmugala
Initial Revision

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

@ssmugala Sony Mobile Header has no class (header). You need to use for: .Mobile-bar or .Mobile.loaded


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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